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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
Jquery使用val方法读写value值
May 18 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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 判断常量,变量和函数是否存在
2009/04/26 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
js实现抽奖效果
2017/03/27 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
介绍一下sql server的安全性
2014/08/10 面试题
工程造价自荐信
2013/10/09 职场文书
店长岗位的工作内容
2013/11/12 职场文书
工地门卫岗位职责
2013/12/30 职场文书
2014年管理工作总结
2014/11/22 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
党员违纪检讨书
2015/05/05 职场文书
回复函范文
2015/07/14 职场文书
商业计划书格式、范文
2019/03/21 职场文书