jquery 可排列的表实现代码


Posted in Javascript onNovember 13, 2009

在Table标签上设置 class="sortable" 且Table要设置ID.
表中增加了两行代码是JQuery写的.用于给奇偶行变色.

addEvent(window, "load", sortables_init); var SORT_COLUMN_INDEX; 
function sortables_init() { 
// Find all tables with class sortable and make them sortable 
if (!document.getElementsByTagName) return; 
tbls = document.getElementsByTagName("table"); 
for (ti=0;ti<tbls.length;ti++) { 
thisTbl = tbls[ti]; 
if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) { 
//initTable(thisTbl.id); 
ts_makeSortable(thisTbl); 
} 
} 
} 
function ts_makeSortable(table) { 
if (table.rows && table.rows.length > 0) { 
var firstRow = table.rows[0]; 
} 
if (!firstRow) return; 
// We have a first row: assume it's the header, and make its contents clickable links 
for (var i=0;i<firstRow.cells.length;i++) { 
var cell = firstRow.cells[i]; 
var txt = ts_getInnerText(cell); 
cell.innerHTML = '<a href="#" class="sortheader" '+ 
'onclick="ts_resortTable(this, '+i+');return false;">' + 
txt+'<span class="sortarrow">   </span></a>'; 
} 
} 
function ts_getInnerText(el) { 
if (typeof el == "string") return el; 
if (typeof el == "undefined") { return el }; 
if (el.innerText) return el.innerText; //Not needed but it is faster 
var str = ""; 
var cs = el.childNodes; 
var l = cs.length; 
for (var i = 0; i < l; i++) { 
switch (cs[i].nodeType) { 
case 1: //ELEMENT_NODE 
str += ts_getInnerText(cs[i]); 
break; 
case 3: //TEXT_NODE 
str += cs[i].nodeValue; 
break; 
} 
} 
return str; 
} 
function ts_resortTable(lnk,clid) { 
// get the span 
var span; 
for (var ci=0;ci<lnk.childNodes.length;ci++) { 
if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci]; 
} 
var spantext = ts_getInnerText(span); 
var td = lnk.parentNode; 
var column = clid || td.cellIndex; 
var table = getParent(td,'TABLE'); 
var tableid=$(table).attr("id"); 
// Work out a type for the column 
if (table.rows.length <= 1) return; 
var itm = ts_getInnerText(table.rows[1].cells[column]); 
sortfn = ts_sort_caseinsensitive; 
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date; 
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date; 
if (itm.match(/^[?]/)) sortfn = ts_sort_currency; 
if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric; 
SORT_COLUMN_INDEX = column; 
var firstRow = new Array(); 
var newRows = new Array(); 
for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; } 
for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; } 
newRows.sort(sortfn); 
if (span.getAttribute("sortdir") == 'down') { 
ARROW = '  ↑'; 
newRows.reverse(); 
span.setAttribute('sortdir','up'); 
} else { 
ARROW = '  ↓'; 
span.setAttribute('sortdir','down'); 
} 
// We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones 
// don't do sortbottom rows 
for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);} 
// do sortbottom rows only 
for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);} 
// Delete any other arrows there may be showing 
var allspans = document.getElementsByTagName("span"); 
for (var ci=0;ci<allspans.length;ci++) { 
if (allspans[ci].className == 'sortarrow') { 
if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us? 
allspans[ci].innerHTML = '   '; 
} 
} 
} 
span.innerHTML = ARROW; 
$('#'+tableid+' tr:gt(0):even').css("background-color","FFF7E8"); 
$('#'+tableid+' tr:gt(0):odd').css("background-color","#CCE8CF"); 
} 
function getParent(el, pTagName) { 
if (el == null) return null; 
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase 
return el; 
else 
return getParent(el.parentNode, pTagName); 
} 
function ts_sort_date(a,b) { 
// y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX 
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]); 
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]); 
if (aa.length == 10) { 
dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2); 
} else { 
yr = aa.substr(6,2); 
if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; } 
dt1 = yr+aa.substr(3,2)+aa.substr(0,2); 
} 
if (bb.length == 10) { 
dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2); 
} else { 
yr = bb.substr(6,2); 
if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; } 
dt2 = yr+bb.substr(3,2)+bb.substr(0,2); 
} 
if (dt1==dt2) return 0; 
if (dt1<dt2) return -1; 
return 1; 
} 
function ts_sort_currency(a,b) { 
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,''); 
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,''); 
return parseFloat(aa) - parseFloat(bb); 
} 
function ts_sort_numeric(a,b) { 
aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX])); 
if (isNaN(aa)) aa = 0; 
bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX])); 
if (isNaN(bb)) bb = 0; 
return aa-bb; 
} 
function ts_sort_caseinsensitive(a,b) { 
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase(); 
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase(); 
if (aa==bb) return 0; 
if (aa<bb) return -1; 
return 1; 
} 
function ts_sort_default(a,b) { 
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]); 
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]); 
if (aa==bb) return 0; 
if (aa<bb) return -1; 
return 1; 
} 

function addEvent(elm, evType, fn, useCapture) 
// addEvent and removeEvent 
// cross-browser event handling for IE5+, NS6 and Mozilla 
// By Scott Andrew 
{ 
if (elm.addEventListener){ 
elm.addEventListener(evType, fn, useCapture); 
return true; 
} else if (elm.attachEvent){ 
var r = elm.attachEvent("on"+evType, fn); 
return r; 
} else { 
alert("Handler could not be removed"); 
} 
}
Javascript 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 #Javascript
传智播客学习之JavaScript基础篇
Nov 13 #Javascript
用document.documentElement取代document.body的原因分析
Nov 12 #Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 #Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 #Javascript
jquery控制listbox中项的移动并排序
Nov 12 #Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 #Javascript
You might like
PHP脚本数据库功能详解(上)
2006/10/09 PHP
php创建多级目录代码
2008/06/05 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
javascript常见用法总结
2014/05/22 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
spyder常用快捷键(分享)
2017/07/19 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python面向对象进阶学习
2019/05/21 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
介绍一下write命令
2012/09/24 面试题
洗煤厂厂长岗位职责
2014/01/03 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
安全协议书范本
2014/04/21 职场文书
工作建议书范文
2014/05/13 职场文书
深入理解python多线程编程
2021/04/18 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android
Python利用FlashText算法实现替换字符串
2022/03/31 Python