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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
JavaScript实现select添加option
Jul 03 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 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 file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python正则表达式match和search用法实例
2015/03/26 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python如何调用百度识图api
2020/09/29 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
枚举与#define宏的区别
2014/04/30 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
《春天来了》教学反思
2014/04/07 职场文书
倡议书的写法
2014/08/30 职场文书
股东授权委托书
2014/10/15 职场文书
开会通知
2015/04/20 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技
js 实现验证码输入框示例详解
2022/09/23 Javascript