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 相关文章推荐
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
jQuery事件对象总结
Oct 17 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
layui使用及简单的三级联动实现教程
Dec 01 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
js解决movebox移动问题
2016/03/29 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
初中班主任评语大全
2014/04/24 职场文书
学校师德承诺书
2014/05/23 职场文书
环境保护标语
2014/06/20 职场文书
学位证书委托书
2014/09/30 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书