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 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
如何实现js拖拽效果及原理解析
May 08 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处理换行符的问题 \r\n
2013/06/13 PHP
php网站地图生成类示例
2014/01/13 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
keras打印loss对权重的导数方式
2020/06/10 Python
区分python中的进程与线程
2020/08/13 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
教师档案管理制度
2014/01/23 职场文书
自荐信写法介绍
2014/01/25 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
预防煤气中毒方案
2014/06/16 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
教师外出学习心得体会
2016/01/18 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang