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 相关文章推荐
js对象的比较
Feb 26 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
详解tween.js的使用教程
Sep 14 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
Node登录权限验证token验证实现的方法示例
May 25 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
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
Node.js中DNS模块学习总结
2018/02/28 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
运动会获奖感言
2014/02/11 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
优质服务活动实施方案
2014/05/02 职场文书
中秋晚会活动方案
2014/08/31 职场文书
采购内勤岗位职责
2015/04/13 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS