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+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
Angular 如何使用第三方库的方法
Apr 18 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
Vue实现简易计算器
Feb 25 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
vue3获取当前路由地址
Feb 18 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
拼音码表的生成
2006/10/09 PHP
PHP+DBM的同学录程序(1)
2006/10/09 PHP
php简单静态页生成过程
2008/03/27 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
在Python中处理时间之clock()方法的使用
2015/05/22 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python输出数学符号实例
2020/05/11 Python
初学者学习Python好还是Java好
2020/05/26 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
专升本个人自我评价
2013/12/22 职场文书
经典演讲稿汇总
2014/05/19 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python