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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
详解vue 数组和对象渲染问题
Sep 21 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中文分词系统SCWS安装和使用实例
2014/04/11 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python按行读取文件的简单实现方法
2016/06/22 Python
Python内置函数OCT详解
2016/11/09 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python如何进行时间处理
2020/08/06 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
你对IPv6了解程度
2016/02/09 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
化工机械应届生求职信
2013/11/04 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
基层党员公开承诺书
2014/05/29 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
导航工程专业自荐信
2014/09/02 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
单位租车协议书
2015/01/29 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python