DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js表頭排序實現方法
js表頭排序實現方法
編輯:JavaScript綜合知識     

 這篇文章主要介紹了js表頭排序實現方法,涉及數字、字母、字符串比較及排序等操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

   

本文實例講述了js表頭排序實現方法。分享給大家供大家參考。

具體實現方法如下:

 

代碼如下:
<script type="text/javascript">
//是否遞減排序
var isDescending = true;
/*****************************************
* 要排序的行必須放到<tbody></tbody>標簽中
* tableId:排序表格ID
* colNo:排序的列號,即第幾列,從0開始
* startRowNo:排序的開始行號,從0開始
* sortLength:要排序的行數,
* type:排序列的類型
*/
function sort(tableId, colNo ,startRowNo, sortLength, type)
{
//如果要排序的行數是1或是0,則不對其進行排序操作
if(sortLength<=1){
return;
}
var currTable = document.getElementById(tableId);
var theHeader = currTable.outerHTML.substring(0, currTable.outerHTML.indexOf('<TBODY>')+7)
var theFooter = currTable.outerHTML.substring(currTable.outerHTML.indexOf('</TBODY>')-8);
//這裡的行數是去掉表頭表頭行和表位行的行數
var theRows = new Array(sortLength);
//對表中的數據進行循環
for(i=startRowNo; i<sortLength+startRowNo; i++)
{
theRows[i-startRowNo] = new Array(currTable.rows[i].cells[colNo].innerText.toLowerCase(), currTable.rows[i].outerHTML);
}
if(type.toUpperCase()=='NUMBER')
{
theRows.sort(compareNumber);
}
else if(type.toUpperCase()=='DATE')
theRows.sort(compareDate);
else if(type.toUpperCase()=='STRING')
theRows.sort(compareString);
var tableInfo=''
for(j=0; j<theRows.length; j++)
{
tableInfo+=theRows[j][1];
}
isDescending = !isDescending;
currTable.outerHTML= theHeader + tableInfo +theFooter;
return ;
}
//對數字進行比較
function compareNumber(x, y)
{
//對貨幣格式的數據進行轉化
a = x[0].excludeChars(",").trim();
b = y[0].excludeChars(",").trim();

if(a==""){a=0;}
if(b==""){b=0;}
if(isDescending)
{
return parseFloat(b) - parseFloat(a);
}
else
{
return parseFloat(a) - parseFloat(b);
}
}
//對字符串進行比較
function compareString(x, y)
{
if(isDescending)
{
if(x[0]>y[0]) return -1;
else if(x[0]<y[0]) return 1;
else return 0;
}
else
{
if(x[0]<y[0]) return -1;
else if(x[0]>y[0]) return 1;
else return 0;
}
}
//對時間進行比較
function compareDate(x,y){
var arr=x[0].split("-");
var starttime=new Date(arr[0],arr[1],arr[2]);
var starttimes=starttime.getTime();
var arrs=y[0].split("-");
var lktime=new Date(arrs[0],arrs[1],arrs[2]);
var lktimes=lktime.getTime();

if(isDescending)
{
return lktimes - starttimes;
}
else
{
return starttimes - lktimes;
}
}
//去除字符串中所有指定的字符串
String.prototype.excludeChars = function(chars){
var matching = new RegExp(chars , "g") ;
return this.replace(matching , '') ;
}
</script>

 

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved