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 相关文章推荐
Maps Javascript
Jan 22 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
vue之将echart封装为组件
Jun 02 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
js实现手表表盘时钟与圆周运动
Sep 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
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
Python制作钉钉加密/解密工具
2016/12/07 Python
python正则分析nginx的访问日志
2017/01/17 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
会计顶岗实习心得
2014/01/25 职场文书
追悼会主持词
2014/03/20 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
模具专业求职信
2014/06/26 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
事业单位聘任报告
2015/03/02 职场文书
会议新闻稿
2015/07/17 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
化工生产实习心得体会
2016/01/22 职场文书