javascript 带有滚动条的表格,标题固定,带排序功能.


Posted in Javascript onNovember 13, 2009
//使用要求: 
//1.将表格的Class命名为:sorttableHold, 
//2.表格放置在一个div中,此div设有overflow属性. 
//3.表格要求有ID,div要求有ID 
//4.要有JQuery.min.js文件 
//5.OK. 
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("sorttableHold") != -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>'; 
} 
if(table!=undefined)//分离 
{ 
$('<div id="'+table.id+'Title"></div>').insertBefore('#'+table.parentNode.parentNode.id);//创建DIV 
var div_title=document.getElementById(table.id+'Title'); 
var title = table.cloneNode(true)//all再复制给title 
for(i = title.rows.length -1;i >0;i--)//把title中内容全部删除,只留第一行,也就是标题 
title.deleteRow(i) 
table.deleteRow(0)//GridView中第一行(标题)删除,也就只有内容了 
div_title.appendChild(title) //标题给div 
$("#"+div_title.id+" table:eq(0)").attr("id",div_title.id+"1"); 
$(table).removeAttr("class"); 
} 
} 
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++) {//获取标题中的Span 
if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci]; 
} 
var spantext = ts_getInnerText(span);//标题Span内容 
var td = lnk.parentNode;//单元格 
var column = clid || td.cellIndex;//列 
var tablecurrent = getParent(td,'TABLE');//表 
var tableid=tablecurrent.id.substring(0,tablecurrent.id.length-6); 
var table=document.getElementById(tableid); 
// Work out a type for the column 
if (table.rows.length <= 1) return; 
var itm = ts_getInnerText(table.rows[0].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=0;j<table.rows.length;j++) { newRows[j] = 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:even').css("background-color","FFF7E8"); 
$('#'+tableid+' tr: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 相关文章推荐
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
关于JS中prototype的理解
Sep 07 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
JS访问对象两种方式区别解析
Aug 29 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
两个select之间option的互相添加操作(jquery实现)
Nov 12 #Javascript
You might like
文件上传的实现
2006/10/09 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
python如何获取apk的packagename和activity
2020/01/10 Python
django 读取图片到页面实例
2020/03/27 Python
python实现交并比IOU教程
2020/04/16 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
2015入党自荐书范文
2015/03/05 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
React配置子路由的实现
2021/06/03 Javascript
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
Windows server 2016服务器基本设置
2022/08/14 Servers