并不是所有的Web 开发者都会对美化表格数据感兴趣,今天我们收集了20 个功能强大,外观漂亮的基于Ajax + CSS 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。
现在让我们来看看这些表格:(点击每个样式前面的链接即可进入下载)
#1. Tablecloth
Tablecloth 由CSS Globe 开发,是一个轻量级的、易于使用的表格,以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。
#2. Ask the CSS Guy Table
Ask the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格,例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。
#3. A CSS styled table version 2
Veerle Duoh 为我们介绍了一种如何利用CSS 使表格更有吸引力的方法,并且在实现的过程中充分考虑了表格的可访问性。
#4. Sortable Table
Sortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。
#5. Row Locking with CSS and JavaScript
演示了如何利用Javascript 和 CSS 实现“锁定行”的效果,选中的行会一直显示高亮效果直到用户再次点击才会消失。
#6. Vertical scrolling tables
如果你有大量的数据但是没有足够大的空间来显示它,这会是一个很好的解决办法。通过CSS 固定表格的页眉和页脚,但是内容却可以滚动显示。
#7. Replicating a Tree table
利用HTML 和CSS 建立的树状表格。
#8. Collapsible tables with DOM and CSS
利用DOM 和CSS 建立的可折叠的表格效果。表格页脚部分包含的箭头有一个名为“footcollapse”的类,通过为之添加Javascript 代码可以让表格展开或折叠。
#9. TableSorter plug-in for jQuery
为jQuery 定制的插件,它的主要功能包括允许多列排序,支持 元素的rowspan 和colspan 属性。
#10. Stripe your tables the OO way
利用Javascript 为指定表格中的行定义交替颜色,并添加onmouseover 和onmouseout 事件。
#11. MooTools Table Row & Column highlighting
利用MooTools 框架高亮显示鼠标悬停的单元格所在的行和列。
#12. CSS Table Gallery
又一个利用CSS 高亮显示鼠标悬停当前行时的表格效果。
#13. jQuery Table Filter
为jQuery 框架开发的表格排序、过滤插件,可以通过Ctrl + 鼠标单击选择多重列。
#14. PHP Ajax Table
支持所有主流浏览器,自动填入数据,利用后台PHP / MySQL 可以实时滚动、排序、编辑、添加、过滤数据。包括默认、MS Office 2007 、 MS Office XP Excel 三种样式。
#15. SortTable
只需为你想要排序的表格添加一个名为“sortable ”的class ,就可以实现表格的排序功能。
#16. Zebra Tables
A List Apart为我们提供了一个极好的利用Javascript 和 DOM 为表格的单元格应用背景色的示例。
#17. Standardista Table Sorting
Standardista Table Sorting 是一个可以让你按照表格的任何列进行排序的Javascript 脚本。
#18. GridView3 Example
利用Ext Js 框架,功能强大的表格。
#19. Mootable
利用MooTools 框架开发的又一个可排序的表格。
#20. Drag & Drop Sortable Lists with JavaScript and CSS
利用Javascript 和 CSS 实现的可以拖曳、排序列表的效果。
转自:http://www.okajax.com/a/200807/0G0N432008.html
分享到:
相关推荐
Tablecloth 由CSS Globe 开发,是一个轻量级的、易于使用的表格,以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。
21个新奇漂亮的AjaxCSS表格设计
php+mysql+ajax分页+表格table+loading效果+css(已测试成功)
本文件包含ajaxpg.php, ajax.js, loading.gif, page.css, table.sql 未含任何框架,配置数据库运行即可!! 大家稍稍修改就可以运用在自己的网页系统中!!!
本资料无任何框架,有mysql...文件包含ajaxpg.php,ajax.js,page.css,loading.gif,table.sql; 动态数据显示在table里,有loading效果,page有css样式,可自定义样式,内有注释,大家稍稍修改可添加在个人网页系统中!!
Java+Servlet+HTML+CSS+数据库,实现的学生信息管理系统,实现了 新增和查询功能。 覆盖知识 java部分:程序基本概念、数据类型、流程控制、顺序、选择 、循环、跳转语句、变量、类、方法、实用类、JDBC、三层架构...
第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.2 表格实例一:隔行变色 6.3 表格实例二:鼠标经过时变色的表格 6.4 表格实例三:日历 6.5 CSS与表单 6.6 综合实例一:直接输入...
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
随着Web 2.0的大潮席卷而来,网页标准化CSS+DIV的设计方式正逐渐取代传统的表格布局模式,对CSS的学习也成为设计人员的必修课。 本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行...
第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.2 表格实例一:隔行变色 6.3 表格实例二:鼠标经过时变色的表格 6.4 表格实例三:日历 6.5 CSS与表单 6.6 综合实例一:直接输入...
第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.1.1 表格中的标记 6.1.2 表格的颜色 6.1.3 表格的边框 6.2 表格实例一:隔行变色 6.3 表格实例二:鼠标经过时变色的表格 6.4 表格实例三:...
第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.2 表格实例一:隔行变色 6.3 表格实例二:鼠标经过时变色的表格 6.4 表格实例三:日历 6.5 CSS与表单 6.6 综合实例一:...
本书还详细讲解了其他书中较少涉及的技术细节,包括扩展CSS与JavaScript、XML和Ajax的综合应用等内容,指导读者制作符合Web标准的网页,使从事或欲从事网站设计开发专业工作的读者提升技术水平和竞争能力。...
使用ajax+artTemplate完成表格的渲染(HelloApp) 对应的css,js文件在这里,点击下载即可(里面有源码哦)
第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.2 表格实例一:隔行变色 6.3 表格实例二:鼠标经过时变色的表格 6.4 表格实例三:日历 6.5 CSS与表单 6.6 综合实例一:直接输入...
表格大家都十分熟悉,如今的CSS也使得表格的布局越来越光彩耀人。但是,无论如何,都掩饰不了那些包装下的死板。 那么如何让那些死板的数据 更具有可读性、可用性,能够让我们那些数据在“动”呢? 下面我们使用...
实例20 网页计数器 实例21 超级链接计数 第3章 数据库、XML实例 实例22 mysql类库完成MySQL数据库的添加、删除和修改 实例23 mysqli类库完成MySQL数据库的添加、删除和查询 实例24 获取服务器和系统信息 实例...
* 是个裸体表格,样式完全开放,利用CSS自己定制。 * 提供增加,删除行的功能。 * 可分页导航,支持动态改变单页最大行数。 * 可页面排序(支持中文拼音排序)。 * 插件式设计,表格可独立使用,Ajax特性与分页...
实例20 网页计数器 实例21 超级链接计数 第3章 数据库、XML实例 实例22 mysql类库完成MySQL数据库的添加、删除和修改 实例23 mysqli类库完成MySQL数据库的添加、删除和查询 实例24 获取服务器和系统信息 实例25 分页...