javascript 表格排序和表头浮动效果(扩展SortTable)


Posted in Javascript onApril 07, 2009

一、SortTable说明
SortTable
version 2
7th April 2007
Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/

Instructions:
Download this file
Add <script src=”sorttable.js”></script> to your HTML
Add class=”sortable” to any table you'd like to make sortable
Click on the headers to sort

Thanks to many, many people for contributions and suggestions.
Licenced as X11: http://www.kryogenix.org/code/browser/licence.html
This basically means: do what you want with it.

用法:将要排序的表格添加CSS,如<table class=”sortable”>
默认对所有列都会添加排序功能,对于不需要排序的列可添加CSS:”sorttable_nosort”,如<td class=”sorttable_nosort”></td>

二、更新说明

Update:
version 2.1
9th Mar 2009
Hopesoft , http://www.51ajax.com/blog/

说明:
1.增加中文排序
2.增加指定各行使用不同css样式功能(比如奇偶行背景色不一致)
用法:在要表头浮动的表格上添加属性,如<table class="sortable" rowclass="bg1,bg2,bg3">
3.增加表头浮动功能(支持同一个页面有多个表格,比如不同Tab标签下的各个表格)
用法:在要表头浮动的表格上添加CSS,如<table class="scrolltable">
另外最好指定“表头”和“数据行”的各列的列宽,如
<tr><td class='w1'>姓名</td><td class='w2'>年龄</td></tr>
<tr><td class='w1'>张三</td><td class='w2'>21</td></tr>
以避免在FireFox下表头浮动时表头各列与数据各列不对齐
4.增加页面载入后自动排序
用法:在表格上添加属性autosortcol,对应要自动排序的列号,注意是从0开始
如<table class="sortable" autosortcol="3">,则表示当页面载入成功后,会自动对第4行进行

新增的代码都用中文做了注释,屏蔽了原有代码中部分代码。另外原来代码中升降序顺序ms是反的,我这边做了更改。
演示地址 http://img.3water.com/online/sorttable/sorttable.htm
打包下载地址: http://img.3water.com/online/sorttable/sorttable.rar

Javascript 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 #Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 #Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 #Javascript
javascript 兼容鼠标滚轮事件
Apr 07 #Javascript
javascript 有趣而诡异的数组
Apr 06 #Javascript
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 #Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 #Javascript
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php获取当月最后一天函数分享
2015/02/02 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
Python学习资料
2007/02/08 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python中metaclass原理与用法详解
2019/06/25 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
求职信写作要突出重点
2014/01/01 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
刑事案件上诉状
2015/05/23 职场文书
清明节随笔
2015/08/15 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫