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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
Javascript 类型转换方法
Oct 24 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
OpenLayers3实现地图显示功能
Sep 25 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中创建并处理图象
2006/10/09 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
PHP7 弃用功能
2021/03/09 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python实现linux下使用xcopy的方法
2015/06/28 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
对Python 语音识别框架详解
2018/12/24 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
python 读取.nii格式图像实例
2020/07/01 Python
Python 创建守护进程的示例
2020/09/29 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
2014年公务员个人工作总结
2014/11/22 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
人民检察院起诉书
2015/05/20 职场文书