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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
学习vue.js计算属性
Dec 03 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
在Python的Django框架中创建语言文件
2015/07/27 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python之用户输入的实例
2018/06/22 Python
详解django.contirb.auth-认证
2018/07/16 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
详解Python中import机制
2020/09/11 Python
详解pandas映射与数据转换
2021/01/22 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
总经理司机岗位职责
2015/04/10 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
个人收入证明格式
2015/06/24 职场文书
责任书格式
2019/04/18 职场文书
美元符号 $
2022/02/17 杂记