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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
深入理解node.js之path模块
May 03 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
vue实现信息管理系统
May 30 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 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 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
python访问sqlserver示例
2014/02/10 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
工程资料员岗位职责
2014/03/10 职场文书
小学清明节活动总结
2014/07/04 职场文书
检讨书大全
2015/01/27 职场文书
结婚司仪主持词
2015/06/29 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
SQL Server实现分页方法介绍
2022/03/16 SQL Server