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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 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
header导出Excel应用示例
2014/01/24 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
详解参数传递四种形式
2015/07/21 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Python3基础之基本运算符概述
2014/08/13 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
Python实现微信小程序支付功能
2019/07/25 Python
在vscode中配置python环境过程解析
2019/09/28 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
情况说明书格式范文
2014/05/06 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
Python 线程池模块之多线程操作代码
2021/05/20 Python