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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
js动态创建标签示例代码
Jun 09 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
JavaScript 异步时序问题
Nov 20 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
python保存字符串到文件的方法
2015/07/01 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python 字符串常用函数详解
2019/09/11 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Python魔术方法专题
2020/06/19 Python
python3字符串输出常见面试题总结
2020/12/01 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
什么是类的返射机制
2016/02/06 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
大学生军训广播稿
2014/01/24 职场文书
生产部岗位职责范文
2014/02/07 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
教学质量评估实施方案
2014/03/17 职场文书
关于童年的读书笔记
2015/06/26 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书