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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 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+DBM的同学录程序(5)
2006/10/09 PHP
PHP7修改的函数
2021/03/09 PHP
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
原生JavaScript实现购物车
2021/01/10 Javascript
Python中的字典遍历备忘
2015/01/17 Python
Python中常见的数据类型小结
2015/08/29 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python实现批量压缩图片
2018/01/25 Python
python3.6的venv模块使用详解
2018/08/01 Python
python系列 文件操作的代码
2019/10/06 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
小学社团活动总结
2014/06/27 职场文书
奖学金个人总结
2015/03/04 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
草房子读书笔记
2015/06/29 职场文书
2016小学新学期寄语
2015/12/04 职场文书