经典论坛's Archiver

dengwujie 发表于 2008-6-8 17:45

20 个经典的 Ajax + CSS 表格

并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中[color=#0000ff]学习[/color]怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。
现在让我们来看看这些表格：



#1. [color=#0000ff]Tablecloth[/color]Tablecloth 由[color=#0000ff]CSS Globe[/color] 开发，是一个轻量级的、易于使用的表格，以友好的方式将样式和[color=#0000ff]行为[/color]添加到你当前的HTML 表格元素当中。
[img]http://www.reiyee.cn/upload/table/c1.gif[/img]




#2. [color=#0000ff]Ask the CSS Guy Table[/color]Ask the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格，例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。
[img]http://www.reiyee.cn/upload/table/c2.gif[/img]



#3. [color=#0000ff]A CSS styled table version 2[/color][color=#0000ff]Veerle Duoh[/color] 为我们介绍了一种如何利用CSS 使表格更有吸引力的方法，并且在实现的过程中充分考虑了表格的可访问性。
[img]http://www.reiyee.cn/upload/table/c4.gif[/img]



#4. [color=#0000ff]Sortable Table[/color]Sortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。
[img]http://www.reiyee.cn/upload/table/c5.gif[/img]



#5. [color=#0000ff]Row Locking with CSS and JavaScript[/color]演示了如何利用Javascript 和 CSS 实现“锁定行”的效果，选中的行会一直显示高亮效果直到用户再次点击才会消失。
[img]http://www.reiyee.cn/upload/table/c3.gif[/img]



#6. [color=#0000ff]Vertical scrolling tables[/color]如果你有大量的数据但是没有足够大的空间来显示它，这会是一个很好的解决办法。通过CSS 固定表格的页眉和页脚，但是内容却可以滚动显示。
[img]http://www.reiyee.cn/upload/table/c6.gif[/img]
#7. [color=#0000ff]Replicating a Tree table[/color]利用HTML 和CSS 建立的树状表格。
[img]http://www.reiyee.cn/upload/table/c7.gif[/img]


#8. [color=#0000ff]Collapsible tables with DOM and CSS[/color]利用DOM 和CSS 建立的可折叠的表格效果。表格页脚部分包含的箭头有一个名为“footcollapse”的类，通过为之添加Javascript 代码可以让表格展开或折叠。
[img]http://www.reiyee.cn/upload/table/c8.gif[/img]


#9. [color=#0000ff]TableSorter plug-in for jQuery[/color]为[color=#0000ff]jQuery[/color] 定制的插件，它的主要功能包括允许多列排序，支持<TH> 元素的rowspan 和colspan 属性。
[img]http://www.reiyee.cn/upload/table/c10.gif[/img]



#10. [color=#0000ff]Stripe your tables the OO way[/color]利用Javascript 为指定表格中的行定义交替颜色，并添加onmouseover 和onmouseout 事件。
[img]http://www.reiyee.cn/upload/table/c11.gif[/img]


#11. [color=#0000ff]MooTools Table Row & Column highlighting[/color]利用[color=#0000ff]MooTools[/color] 框架高亮显示鼠标悬停的单元格所在的行和列。
[img]http://www.reiyee.cn/upload/table/c12.gif[/img]
#12. [color=#0000ff]CSS Table Gallery[/color]又一个利用CSS 高亮显示鼠标悬停当前行时的表格效果。
[img]http://www.reiyee.cn/upload/table/c13.gif[/img]


#13. [color=#0000ff]jQuery Table Filter[/color]为[color=#0000ff]jQuery[/color] 框架开发的表格排序、过滤插件，可以通过Ctrl + 鼠标单击选择多重列。
[img]http://www.reiyee.cn/upload/table/c14.gif[/img]



#14. [color=#0000ff]PHP Ajax Table[/color]支持所有主流浏览器，自动填入数据，利用后台PHP / MySQL 可以实时滚动、排序、编辑、添加、过滤数据。包括默认、MS Office 2007 、 MS Office XP Excel 三种样式。
[img]http://www.reiyee.cn/upload/table/c15.gif[/img]



#15. [color=#0000ff]SortTable[/color]只需为你想要排序的表格添加一个名为“sortable ”的class ，就可以实现表格的排序功能。
[img]http://www.reiyee.cn/upload/table/c16.gif[/img]



#16. [color=#0000ff]Zebra Tables[/color][color=#0000ff]A List Apart[/color]为我们提供了一个极好的利用Javascript 和 DOM 为表格的单元格应用背[color=#0000ff]景色[/color]的示例。
[img]http://www.reiyee.cn/upload/table/c17.gif[/img]



#17. [color=#0000ff]Standardista Table Sorting[/color]Standardista Table Sorting 是一个可以让你按照表格的任何列进行排序的Javascript 脚本。
[img]http://www.reiyee.cn/upload/table/c18.gif[/img]



#18. [color=#0000ff]GridView3 Example[/color]利用[color=#810081]Ext Js[/color] 框架，功能强大的表格。
[img]http://www.reiyee.cn/upload/table/c19.gif[/img]




#19. [color=#0000ff]Mootable[/color]利用[color=#0000ff]MooTools[/color] 框架开发的又一个可排序的表格。
[img]http://www.reiyee.cn/upload/table/c20.gif[/img]




#20. [color=#0000ff]Drag & Drop Sortable Lists with JavaScript and CSS[/color]利用Javascript 和 CSS 实现的可以拖曳、排序列表的效果。
[img]http://www.reiyee.cn/upload/table/c21.gif[/img]

[color=red]点击浏览下载---------地址以屏蔽,AD[/color]

[[i] 本帖最后由 xling 于 2008-6-11 23:59 编辑 [/i]]

ilychw 发表于 2008-6-8 19:50

很好，收藏了，谢谢楼主。

fatkun 发表于 2008-6-9 14:32

感觉很不错喔~~收藏

xkang 发表于 2008-6-9 16:05

有广告的嫌疑...居然还要在那方的论坛注册..

onlylovely 发表于 2008-6-9 16:45

有点启发性。。收藏了 LZ

fox6300 发表于 2008-6-9 17:09

第一个很PP！

ascii 发表于 2008-6-9 22:13

等别人提供下载地址:p

togoog 发表于 2008-6-10 10:14

楼主辛苦了...

jiege8848 发表于 2008-6-10 10:43

严重广告，在他网站上回复了三次仍不可下载，

顺便鄙视一下使用这种做法的人。

eugenedk 发表于 2008-6-10 11:19

[color=DarkOrange]点击每个样式前面的链接就可以了[/color]

#1. [url=http://cssglobe.com/lab/tablecloth/][color=#0000ff]Tablecloth[/color][/url]
以下内容需要回复才能看到
Tablecloth 由[url=http://cssglobe.com/][color=#0000ff]CSS Globe[/color][/url] 开发，是一个轻量级的、易于使用的表格，以友好的方式将样式和[url=http://clk.qunsee.com/click/click.php?cpid=510&ads_id=723&pid=99000267&cid=271&url=http%3A//www.qunsee.com/promotion.php&k=%u884C%u4E3A&s=http%3A//www.reiyee.cn/Archive/2007/11/20-Fresh-Ajax-CSS-Tables.aspx&rn=808230&v=1&ref=http%3A//www.reiyee.cn/Archive/2007/11/20-Fresh-Ajax-CSS-Tables.aspx&province=%u798F%u5EFA&city=%u798F%u5DDE][color=#0000ff]行为[/color][/url]添加到你当前的HTML 表格元素当中。
[url=http://cssglobe.com/lab/tablecloth/]
[img]http://www.reiyee.cn/upload/table/c1.gif[/img]
[/url]



#2. [url=http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html][color=#0000ff]Ask the CSS Guy Table[/color][/url]

Ask the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格，例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。
[url=http://www.askthecssguy.com/examples/orbitz/example01.html]
[img]http://www.reiyee.cn/upload/table/c2.gif[/img]
[/url]


#3. [url=http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/][color=#0000ff]A CSS styled table version 2[/color][/url]
[url=http://veerle.duoh.com/][color=#0000ff]Veerle Duoh[/color][/url] 为我们介绍了一种如何利用CSS 使表格更有吸引力的方法，并且在实现的过程中充分考虑了表格的可访问性。
[url=http://veerle.duoh.com/sandbox/csstutorials/tablesv2/table2.html]
[img]http://www.reiyee.cn/upload/table/c4.gif[/img]
[/url]


#4. [url=http://www.phatfusion.net/sortabletable/index.htm][color=#0000ff]Sortable Table[/color][/url]
Sortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。
[url=http://www.phatfusion.net/sortabletable/index.htm]
[img]http://www.reiyee.cn/upload/table/c5.gif[/img]
[/url]


#5. [url=http://www.askthecssguy.com/2007/05/brett_asks_the_css_guy_if_the.html][color=#0000ff]Row Locking with CSS and JavaScript[/color][/url]
演示了如何利用Javascript 和 CSS 实现“锁定行”的效果，选中的行会一直显示高亮效果直到用户再次点击才会消失。
[url=http://www.askthecssguy.com/examples/rowlock/example8.html]
[img]http://www.reiyee.cn/upload/table/c3.gif[/img]
[/url]


#6. [url=http://www.cssplay.co.uk/menu/tablescroll.html][color=#0000ff]Vertical scrolling tables[/color][/url]
如果你有大量的数据但是没有足够大的空间来显示它，这会是一个很好的解决办法。通过CSS 固定表格的页眉和页脚，但是内容却可以滚动显示。
[url=http://www.cssplay.co.uk/menu/tablescroll.html]
[img]http://www.reiyee.cn/upload/table/c6.gif[/img]
[/url]


#7. [url=http://www.maxdesign.com.au/presentation/tree-table/][color=#0000ff]Replicating a Tree table[/color][/url]
利用HTML 和CSS 建立的树状表格。
[url=http://www.maxdesign.com.au/presentation/tree-table/]
[img]http://www.reiyee.cn/upload/table/c7.gif[/img]
[/url]


#8. [url=http://icant.co.uk/sandbox/footercollapsetables/][color=#0000ff]Collapsible tables with DOM and CSS[/color][/url]
利用DOM 和CSS 建立的可折叠的表格效果。表格页脚部分包含的箭头有一个名为“footcollapse”的类，通过为之添加Javascript 代码可以让表格展开或折叠。
[url=http://icant.co.uk/sandbox/footercollapsetables/]
[img]http://www.reiyee.cn/upload/table/c8.gif[/img]
[/url]


#9. [url=http://motherrussia.polyester.se/jquery-plugins/tablesorter/][color=#0000ff]TableSorter plug-in for jQuery[/color][/url]
为[url=http://jquery.com/][color=#0000ff]jQuery[/color][/url] 定制的插件，它的主要功能包括允许多列排序，支持 元素的rowspan 和colspan 属性。
[url=http://motherrussia.polyester.se/docs/tablesorter/]
[img]http://www.reiyee.cn/upload/table/c10.gif[/img]
[/url]



#10. [url=http://www.thewatchmakerproject.com/journal/309/stripe-your-tables-the-oo-way][color=#0000ff]Stripe your tables the OO way[/color][/url]
利用Javascript 为指定表格中的行定义交替颜色，并添加onmouseover 和onmouseout 事件。
[url=http://www.thewatchmakerproject.com/zebra.html]
[img]http://www.reiyee.cn/upload/table/c11.gif[/img]
[/url]


#11. [url=http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php][color=#0000ff]MooTools Table Row & Column highlighting[/color][/url]
利用[url=http://www.mootools.net/][color=#0000ff]MooTools[/color][/url] 框架高亮显示鼠标悬停的单元格所在的行和列。
[url=http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php]
[img]http://www.reiyee.cn/upload/table/c12.gif[/img]
[/url]


#12. [url=http://icant.co.uk/csstablegallery/][color=#0000ff]CSS Table Gallery[/color][/url]
又一个利用CSS 高亮显示鼠标悬停当前行时的表格效果。
[url=http://icant.co.uk/csstablegallery/]
[img]http://www.reiyee.cn/upload/table/c13.gif[/img]
[/url]


#13. [url=http://ideamill.synaptrixgroup.com/jquery/tablefilter/tabletest.htm][color=#0000ff]jQuery Table Filter[/color][/url]
为[url=http://jquery.com/][color=#0000ff]jQuery[/color][/url] 框架开发的表格排序、过滤插件，可以通过Ctrl + 鼠标单击选择多重列。
[url=http://ideamill.synaptrixgroup.com/jquery/tablefilter/tabletest.htm]
[img]http://www.reiyee.cn/upload/table/c14.gif[/img]
[/url]


#14. [url=http://justajax.com/table/demo.html][color=#0000ff]PHP Ajax Table[/color][/url]
支持所有主流浏览器，自动填入数据，利用后台PHP / MySQL 可以实时滚动、排序、编辑、添加、过滤数据。包括默认、MS Office 2007 、 MS Office XP Excel 三种样式。
[url=http://justajax.com/table/demo.html]
[img]http://www.reiyee.cn/upload/table/c15.gif[/img]
[/url]



#15. [url=http://www.kryogenix.org/code/browser/sorttable/][color=#0000ff]SortTable[/color][/url]
只需为你想要排序的表格添加一个名为“sortable ”的class ，就可以实现表格的排序功能。
[url=http://www.kryogenix.org/code/browser/sorttable/]
[img]http://www.reiyee.cn/upload/table/c16.gif[/img]
[/url]


#16. [url=http://www.alistapart.com/articles/zebratables/][color=#0000ff]Zebra Tables[/color][/url]
[url=http://www.alistapart.com/][color=#0000ff]A List Apart[/color][/url]为我们提供了一个极好的利用Javascript 和 DOM 为表格的单元格应用背[url=http://clk.qunsee.com/click/click.php?cpid=12&ads_id=743&pid=99000267&cid=271&url=http%3A//www.qutu.com/jsp/guest/domesticcity.jsp%3Fid%3D238&k=%u666F%u8272&s=http%3A//www.reiyee.cn/Archive/2007/11/20-Fresh-Ajax-CSS-Tables.aspx&rn=410082&v=1&ref=http%3A//www.reiyee.cn/Archive/2007/11/20-Fresh-Ajax-CSS-Tables.aspx&province=%u798F%u5EFA&city=%u798F%u5DDE][color=#0000ff]景色[/color][/url]的示例。
[url=http://www.alistapart.com/articles/zebratables/]
[img]http://www.reiyee.cn/upload/table/c17.gif[/img]
[/url]


#17. [url=http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting][color=#0000ff]Standardista Table Sorting[/color][/url]
Standardista Table Sorting 是一个可以让你按照表格的任何列进行排序的Javascript 脚本。
[url=http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting]
[img]http://www.reiyee.cn/upload/table/c18.gif[/img]
[/url]



#18. [url=http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html][color=#0000ff]GridView3 Example[/color][/url]
利用[url=http://extjs.com/][color=#810081]Ext Js[/color][/url] 框架，功能强大的表格。
[url=http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html]
[img]http://www.reiyee.cn/upload/table/c19.gif[/img]
[/url]


#19. [url=http://joomlicious.com/mootable/][color=#0000ff]Mootable[/color][/url]
利用[url=http://mootools.com/][color=#0000ff]MooTools[/color][/url] 框架开发的又一个可排序的表格。
[url=http://joomlicious.com/mootable/]
[img]http://www.reiyee.cn/upload/table/c20.gif[/img]
[/url]



#20. [url=http://tool-man.org/examples/sorting.html][color=#0000ff]Drag & Drop Sortable Lists with JavaScript and CSS[/color][/url]
利用Javascript 和 CSS 实现的可以拖曳、排序列表的效果。
[url=http://tool-man.org/examples/sorting.html]
[img]http://www.reiyee.cn/upload/table/c21.gif[/img]
[/url]
[img]http://z.alimama.com/alimamal.php?i=mm_10164319_249450_321756&u=http%3A%2F%2Fwww.reiyee.cn%2FArchive%2F2007%2F11%2F20-Fresh-Ajax-CSS-Tables.aspx&w=468&h=60&re=1280x1024&sz=12&r=http%3A%2F%2Fwww.reiyee.cn%2FArchive%2F2007%2F11%2F20-Fresh-Ajax-CSS-Tables.aspx&cg=cb99ef80c8ff28ac64177b3fcfb60545&prl=67142513&cas=prl&cah=964&caw=1280&ccd=32&ctz=8&chl=1&cja=1&cpl=0&cmm=0&cf=9.0&sx=52&sy=7155&cbw=1024&cbh=8371[/img]

skybot 发表于 2008-6-10 13:38

很好很强大

dengwujie 发表于 2008-6-11 23:16

已经更新了一部分

aimnxuexi 发表于 2008-6-12 11:13

very good !!:)

likeytom 发表于 2008-6-24 11:15

很不错的效果，都是国外的做的。。。

FishStanding 发表于 2008-6-24 11:18

漂亮的效果啊

谢谢楼主分享，收藏了～

kevins3389 发表于 2008-6-25 10:48

:cool: :cool: :cool:

wujujing2008 发表于 2008-6-25 10:59

sdfds

fsdf

yw2199 发表于 2008-6-25 11:05

很强大 :)

zengyicheng 发表于 2008-6-25 11:24

就是下载不了!!!!!!!!!!!!!

jsgswjtu 发表于 2008-6-25 23:22

收藏，谢谢搂住！

5iyy 发表于 2008-6-26 09:59

有部分是可以下载的

macrochen 发表于 2008-6-26 10:00

没全部的下载地址吗?

chinahappy 发表于 2008-6-26 10:00

地址屏蔽了。分享下代码

snke 发表于 2008-6-26 11:08

地址没了？

heliang11 发表于 2008-6-26 15:48

有下载地址吗

邓永炎 发表于 2008-6-26 15:55

有下载地址吗

xiaohe83 发表于 2008-6-26 19:37

为什么屏蔽地址？

rzsky 发表于 2008-6-26 23:08

:D :D :D 很好很强大..很想收藏

guiyuhuang 发表于 2008-6-28 15:44

还是十楼的兄弟好~~

8yong8 发表于 2008-6-28 23:00

谁能放个下载地址?

kth007 发表于 2008-6-29 21:31

收藏！:D :D

a9527007 发表于 2008-6-29 21:59

表格是重点学习的东西

dtzuo 发表于 2008-6-29 23:29

慢慢看吧。自己研究着做出来。

liudizx 发表于 2008-6-30 10:59

不错不错~下载来看看~

CleverPig 发表于 2008-6-30 13:19

很好很好啊

楼主的东西很不错 用了

hotlover 发表于 2008-6-30 13:53

用div做表格效果挺麻烦的
下个试试。
谢谢ＬＺ

aswand 发表于 2008-7-1 16:38

唉！伤心呐，骗人的:confused:

hyz96 发表于 2008-7-3 12:49

kk

mknbnmbnmnm,

aini3884 发表于 2008-8-2 12:03

想知道下载地址

可以打包下载吗？

hesion 发表于 2008-8-26 18:15

呵呵，不错，收藏一下

yanlingxin 发表于 2008-8-27 09:48

谢谢

内容需要回复才能看到

lolo968 发表于 2008-8-28 09:11

谢谢lz分享。。。
:D

fbt2222 发表于 2008-8-28 09:34

看看。。。。

uiword 发表于 2008-8-28 09:40

这个很有用.谢谢楼主

luxuan1978 发表于 2008-8-28 12:23

为什么哦~？~？

zhuzefu 发表于 2008-8-28 14:51

很好很强大

很好很强大

sprewell2 发表于 2008-8-29 11:38

是真的吗？

duluohua 发表于 2008-8-29 11:47

对我用处不大........

yjpmmm 发表于 2008-8-29 12:35

test

qdoffice 发表于 2008-8-30 10:54

为什么这些都是外国人做的？

页: [1]



Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.