javascript 带有滚动条的表格,标题固定,带排序功能.
2024-05-06 14:12:55
供稿：网友
代码如下:
//使用要求:
//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);
