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中Eval函数的使用说明
Oct 11 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
BootStrap中的表单大全
Sep 07 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
php 问卷调查结果统计
2015/10/08 PHP
3种php生成唯一id的方法
2015/11/23 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
javascript this详细介绍
2016/09/19 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Python处理Excel文件实例代码
2017/06/20 Python
python中 logging的使用详解
2017/10/25 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
2014最新实习证明模板
2014/10/02 职场文书