天天看點

20個漂亮的JS+CSS表格[轉-懶人圖庫]

原文位址為: 20個漂亮的JS+CSS表格[轉-懶人圖庫]

并不是所有的Web 開發者都會對美化表格資料感興趣,今天我們收集了20 個功能強大,外觀漂亮的基于Ajax + CSS 的表格效果,你可以從這些示例中學習怎麼使用這些表格提供的排序和過濾的功能來組織表格中的資料。

現在讓我們來看看這些表格:

#1. Tablecloth

Tablecloth 由CSS Globe 開發,是一個輕量級的、易于使用的表格,以友好的方式将樣式和行為添加到你目前的HTML 表格元素當中。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#2. Ask the CSS Guy Table

Ask the CSS Guy Table 示範了怎麼樣建立一個可以顯示資料之間的關系的表格,例如在單擊某個單元格時可以同時突出顯示最頂端的行和最左邊的列。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#3. A CSS styled table version 2

Veerle Duoh 為我們介紹了一種如何利用CSS 使表格更有吸引力的方法,并且在實作的過程中充分考慮了表格的可通路性。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#4. Sortable Table

Sortable Table ——示範了如何按升序或降序排列以及如何過濾顯示表格中的資料。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#5. Row Locking with CSS and JavaScript

示範了如何利用Javascript 和 CSS 實作“鎖定行”的效果,選中的行會一直顯示高亮效果直到使用者再次點選才會消失。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#6. Vertical scrolling tables

如果你有大量的資料但是沒有足夠大的空間來顯示它,這會是一個很好的解決辦法。通過CSS 固定表格的頁眉和頁腳,但是内容卻可以滾動顯示。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#7. Replicating a Tree table

利用HTML 和CSS 建立的樹狀表格。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#8. Collapsible tables with DOM and CSS

利用DOM 和CSS 建立的可折疊的表格效果。表格頁腳部分包含的箭頭有一個名為“footcollapse”的類,通過為之添加Javascript 代碼可以讓表格展開或折疊。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#9. TableSorter plug-in for jQuery

為jQuery 定制的插件,它的主要功能包括允許多列排序,支援<TH> 元素的rowspan 和colspan 屬性。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#10. Stripe your tables the OO way

利用Javascript 為指定表格中的行定義交替顔色,并添加onmouseover 和onmouseout 事件。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#11. MooTools Table Row & Column highlighting

利用MooTools 架構高亮顯示滑鼠懸停的單元格所在的行和列。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#12. CSS Table Gallery

又一個利用CSS 高亮顯示滑鼠懸停目前行時的表格效果。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#13. jQuery Table Filter

為jQuery 架構開發的表格排序、過濾插件,可以通過Ctrl + 滑鼠單擊選擇多重列。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#14. PHP Ajax Table

支援所有主流浏覽器,自動填入資料,利用背景PHP / MySQL 可以實時滾動、排序、編輯、添加、過濾資料。包括預設、MS Office 2007 、 MS Office XP Excel 三種樣式。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#15. SortTable

隻需為你想要排序的表格添加一個名為“sortable ”的class ,就可以實作表格的排序功能。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#16. Zebra Tables

A List Apart為我們提供了一個極好的利用Javascript 和 DOM 為表格的單元格應用背景色的示例。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#17. Standardista Table Sorting

Standardista Table Sorting 是一個可以讓你按照表格的任何列進行排序的Javascript 腳本。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#18. GridView3 Example

利用Ext Js 架構,功能強大的表格。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#19. Mootable

利用MooTools 架構開發的又一個可排序的表格。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

#20. Drag & Drop Sortable Lists with JavaScript and CSS

利用Javascript 和 CSS 實作的可以拖曳、排序清單的效果。

20個漂亮的JS+CSS表格[轉-懶人圖庫]

轉載請注明本文位址: 20個漂亮的JS+CSS表格[轉-懶人圖庫]

繼續閱讀