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 相关文章推荐
取得传值的函数
Oct 27 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
浅谈js原生拖放
Nov 21 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 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.ini中文版(1)
2006/10/09 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
交通安全教育制度
2014/02/02 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
继承公证书样本
2014/04/04 职场文书
简单租房协议书范本
2014/08/20 职场文书
2014年计生工作总结
2014/11/21 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏