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

//使用要求:
//1.将表格的Class命名为:sorttableHold,
//2.表格放置在一个div中,此div设有overflow属性.
//3.表格要求有ID,div要求有ID
//4.要有JQuery.min.js文件
//5.OK.


addEvent(window,"load",sortables_init);

varSORT_COLUMN_INDEX;

functionsortables_init(){
//Findalltableswithclasssortableandmakethemsortable
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);
}
}
}

functionts_makeSortable(table){
if(table.rows&&table.rows.length>0){
varfirstRow=table.rows[0];
}
if(!firstRow)return;

//Wehaveafirstrow:assumeit"stheheader,andmakeitscontentsclickablelinks
for(vari=0;i<firstRow.cells.length;i++){
varcell=firstRow.cells[i];
vartxt=ts_getInnerText(cell);
cell.innerHTML="<ahref="#"class="sortheader""+
"onclick="ts_resortTable(this,"+i+");returnfalse;">"+
txt+"<spanclass="sortarrow">   </span></a>";
}
if(table!=undefined)//分离
{
$("<divid=""+table.id+"Title"></div>").insertBefore("#"+table.parentNode.parentNode.id);//创建DIV
vardiv_title=document.getElementById(table.id+"Title");
vartitle=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");
}

}
functionts_getInnerText(el){
if(typeofel=="string")returnel;
if(typeofel=="undefined"){returnel};
if(el.innerText)returnel.innerText;//Notneededbutitisfaster
varstr="";

varcs=el.childNodes;
varl=cs.length;
for(vari=0;i<l;i++){
switch(cs[i].nodeType){
case1://ELEMENT_NODE
str+=ts_getInnerText(cs[i]);
break;
case3://TEXT_NODE
str+=cs[i].nodeValue;
break;
}
}
returnstr;
}

functionts_resortTable(lnk,clid){
//getthespan
varspan;
for(varci=0;ci<lnk.childNodes.length;ci++){//获取标题中的Span
if(lnk.childNodes[ci].tagName&&lnk.childNodes[ci].tagName.toLowerCase()=="span")span=lnk.childNodes[ci];
}
varspantext=ts_getInnerText(span);//标题Span内容
vartd=lnk.parentNode;//单元格
varcolumn=clid||td.cellIndex;//列
vartablecurrent=getParent(td,"TABLE");//表
vartableid=tablecurrent.id.substring(0,tablecurrent.id.length-6);
vartable=document.getElementById(tableid);
//Workoutatypeforthecolumn
if(table.rows.length<=1)return;
varitm=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;
varfirstRow=newArray();
varnewRows=newArray();
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");
}

//WeappendChildrowsthatalreadyexisttothetbody,soitmovesthemratherthancreatingnewones
//don"tdosortbottomrows
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]);}
//dosortbottomrowsonly
for(i=0;i<newRows.length;i++)
{if(newRows[i].className&&(newRows[i].className.indexOf("sortbottom")!=-1))table.tBodies[0].appendChild(newRows[i]);}

//Deleteanyotherarrowstheremaybeshowing
varallspans=document.getElementsByTagName("span");
for(varci=0;ci<allspans.length;ci++){
if(allspans[ci].className=="sortarrow"){
if(getParent(allspans[ci],"table")==getParent(lnk,"table")){//inthesametableasus?
allspans[ci].innerHTML="   ";
}
}
}

span.innerHTML=ARROW;
$("#"+tableid+"tr:even").css("background-color","FFF7E8");
$("#"+tableid+"tr:odd").css("background-color","#CCE8CF");
}

functiongetParent(el,pTagName){
if(el==null)returnnull;
elseif(el.nodeType==1&&el.tagName.toLowerCase()==pTagName.toLowerCase())//Geckobug,supposedtobeuppercase
returnel;
else
returngetParent(el.parentNode,pTagName);
}
functionts_sort_date(a,b){
//y2knotes:twodigityearslessthan50aretreatedas20XX,greaterthan50aretreatedas19XX
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)return0;
if(dt1<dt2)return-1;
return1;
}

functionts_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,"");
returnparseFloat(aa)-parseFloat(bb);
}

functionts_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;
returnaa-bb;
}

functionts_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)return0;
if(aa<bb)return-1;
return1;
}

functionts_sort_default(a,b){
aa=ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb=ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if(aa==bb)return0;
if(aa<bb)return-1;
return1;
}


functionaddEvent(elm,evType,fn,useCapture)
//addEventandremoveEvent
//cross-browsereventhandlingforIE5+,NS6andMozilla
//ByScottAndrew
{
if(elm.addEventListener){
elm.addEventListener(evType,fn,useCapture);
returntrue;
}elseif(elm.attachEvent){
varr=elm.attachEvent("on"+evType,fn);
returnr;
}else{
alert("Handlercouldnotberemoved");
}
}