js表頭排序?qū)崿F(xiàn)方法
本文實(shí)例講述了js表頭排序?qū)崿F(xiàn)方法。分享給大家供大家參考。
具體實(shí)現(xiàn)方法如下:
<script type="text/javascript">
//是否遞減排序
var isDescending = true;
/*****************************************
* 要排序的行必須放到<tbody></tbody>標(biāo)簽中
* tableId:排序表格ID
* colNo:排序的列號(hào),即第幾列,從0開始
* startRowNo:排序的開始行號(hào),從0開始
* sortLength:要排序的行數(shù),
* type:排序列的類型
*/
function sort(tableId, colNo ,startRowNo, sortLength, type)
{
//如果要排序的行數(shù)是1或是0,則不對(duì)其進(jìn)行排序操作
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);
//這里的行數(shù)是去掉表頭表頭行和表位行的行數(shù)
var theRows = new Array(sortLength);
//對(duì)表中的數(shù)據(jù)進(jìn)行循環(huán)
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 ;
}
//對(duì)數(shù)字進(jìn)行比較
function compareNumber(x, y)
{
//對(duì)貨幣格式的數(shù)據(jù)進(jìn)行轉(zhuǎn)化
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);
}
}
//對(duì)字符串進(jìn)行比較
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;
}
}
//對(duì)時(shí)間進(jìn)行比較
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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JS實(shí)現(xiàn)點(diǎn)擊表頭表格自動(dòng)排序(含數(shù)字、字符串、日期)
- javascript 表格排序和表頭浮動(dòng)效果(擴(kuò)展SortTable)
- 33種Javascript 表格排序控件收集
- js實(shí)現(xiàn)表格字段排序
- js 靜態(tài)HTML表格排序功能實(shí)現(xiàn)
- js 表格排序(編輯+拖拽+縮放)
- javascript select列表內(nèi)容按字母倒序排序與按列表倒序排列
- js表數(shù)據(jù)排序 sort table data
- javascript 二維排序表格代碼
- javascript多種數(shù)據(jù)類型表格排序代碼分析
- JS實(shí)現(xiàn)的點(diǎn)擊表頭排序功能示例
相關(guān)文章
javascript 隨機(jī)數(shù) 與高級(jí)應(yīng)用 附vbscript(asp) 隨機(jī)數(shù)總結(jié)
有時(shí)忘了程序的隨機(jī)數(shù)函數(shù)或javascript和vbscript的隨機(jī)數(shù)混亂了,特總結(jié)下兩者的隨機(jī)數(shù)函數(shù),以備以后使用方便。2007-10-10
Js-$.extend擴(kuò)展方法使方法參數(shù)更靈活
在JS里,我們的方法參數(shù)通常使用JQ的$.extend擴(kuò)展方法來(lái)實(shí)現(xiàn),感興趣的朋友可以了解下2013-01-01
JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架實(shí)例分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架,結(jié)合實(shí)例形式分析了javascript針對(duì)運(yùn)動(dòng)中的元素屬性檢測(cè)與判斷相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
利用hasOwnProperty給數(shù)組去重的面試題分享
obj.hasOwnProperty(attr) 判斷是否是原型中的屬性,false就是原型中的屬性,下面這篇文章主要給大家介紹了一道利用hasOwnProperty給數(shù)組去重的面試題,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-11-11
JavaScript惰性求值的一種實(shí)現(xiàn)方法示例
這篇文章主要給大家介紹了關(guān)于JavaScript惰性求值的一種實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
JavaScript基于對(duì)象方法實(shí)現(xiàn)數(shù)組去重及排序操作示例
這篇文章主要介紹了JavaScript基于對(duì)象方法實(shí)現(xiàn)數(shù)組去重及排序操作,涉及javascript基于對(duì)象方法的數(shù)組遍歷、比較、去重、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
JS中split()用法(將字符串按指定符號(hào)分割成數(shù)組)
這篇文章主要介紹了JS中split()用法(將字符串按指定符號(hào)分割成數(shù)組)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
微信小程序與webview?H5交互的方法(內(nèi)嵌H5跳轉(zhuǎn)原生頁(yè)面)
小程序webView中嵌套H5頁(yè)面,難免會(huì)遇到小程序與h5頁(yè)面進(jìn)行數(shù)據(jù)通信或交互的場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于微信小程序與webview?H5交互的相關(guān)資料,內(nèi)嵌H5跳轉(zhuǎn)原生頁(yè)面,需要的朋友可以參考下2022-11-11

