javascript 表格內(nèi)容排序 簡(jiǎn)單操作示例代碼
更新時(shí)間:2014年01月03日 11:37:27 作者:
本文為大家詳細(xì)介紹下javascript實(shí)現(xiàn)表格內(nèi)容排序,喜歡的朋友可以參考下
復(fù)制代碼 代碼如下:
<div id="html"></div>
<script>
var listInfos = new Array();
listInfos[0] = new Array();
listInfos[0][0] = {'name':'推薦頁1','DayCount':666,'AvgTime':29872,'ErrCount':180663,'ErrorRate':'2873%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'}
listInfos[0][1] = {'name':'推薦頁2','DayCount':593896,'AvgTime':24946,'ErrCount':222,'ErrorRate':'2%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'}
listInfos[0][2] = {'name':'推薦頁3','DayCount':956,'AvgTime':27957,'ErrCount':111,'ErrorRate':'10%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'}
listInfos[1] = new Array();
listInfos[1][0] = {'name':'推薦頁4','DayCount':666,'AvgTime':116,'ErrCount':180663,'ErrorRate':'2873%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'}
listInfos[1][1] = {'name':'推薦頁5','DayCount':11,'AvgTime':222,'ErrCount':222,'ErrorRate':'2%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'}
listInfos[1][2] = {'name':'推薦頁6','DayCount':956,'AvgTime':956,'ErrCount':111,'ErrorRate':'10%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'}
function dateDesc(listInfos,field){
for( var i=0; i < listInfos.length ; i++ ){
for( var j = i+1 ; j < listInfos.length ; j++ ){
if( isCommaPercent(listInfos[i][field]) < isCommaPercent(listInfos[j][field]) ){
var arrayTemp = new Array();
arrayTemp = listInfos[i];
listInfos[i] = listInfos[j];
listInfos[j] = arrayTemp;
}
}
}
return listInfos;
}
function dataAsc(listInfos,field){
for( var i=0; i < listInfos.length ; i++ ){
for( var j = i+1 ; j < listInfos.length ; j++ ){
if( isCommaPercent(listInfos[i][field]) > isCommaPercent(listInfos[j][field]) ){
var arrayTemp = new Array();
arrayTemp = listInfos[i];
listInfos[i] = listInfos[j];
listInfos[j] = arrayTemp;
}
}
}
return listInfos;
}
function isCommaPercent(value){
var valueFloat;
value = value.toLocaleString();
valueFloat = ( value.indexOf(',') > 0 )? value.split(',').join(''):value;
valueFloat = (valueFloat.indexOf('%') > 0)?parseFloat(valueFloat.substr(0,valueFloat.indexOf('%'))): parseFloat(valueFloat);
return valueFloat;
}
function sortOperation(sortInfos,field,sort){
var listInfos = new Array();
if( sort == 'desc' ){
for(var i=0; i < sortInfos.length ; i++ ){
listInfos[i] = dateDesc(sortInfos[i],field);
}
}else if( sort == 'asc' ){
for(var i=0; i < sortInfos.length ; i++ ){
listInfos[i] = dataAsc(sortInfos[i],field);
}
}else{
alert('操作錯(cuò)誤...');
return false;
}
var tableStrList ='';
for( var i=0; i < listInfos.length ; i++ ){
var tableStr='<h1>程序</h1>';
tableStr+= '<table width="100%" cellspacing="0" cellpadding="0" border="1" class="programTabble"><tbody><tr class="indexTableTr">';
tableStr +='<td width="16%">程序名稱</td><td width="14%">當(dāng)天訪問量(次)</td><td width="14%">平均響應(yīng)時(shí)間(us)</td><td width="14%">錯(cuò)誤數(shù)(次)</td>';
tableStr +='<td width="14%">錯(cuò)誤率(%)</td> <td width="14%">系統(tǒng)錯(cuò)誤數(shù)(次)</td> <td width="14%">系統(tǒng)錯(cuò)誤率(%)</td> </tr> ';
for( var j = 0 ; j < listInfos[i].length ; j++ ){
tableStr +='<tr>';
tableStr +='<td><a href="detail.php?type=programs&pid=1">'+listInfos[i][j]['name']+'</a></td>';
tableStr +='<td>'+listInfos[i][j]['DayCount']+'</td>';
tableStr +='<td>'+listInfos[i][j]['AvgTime']+'</td>';
tableStr +='<td>'+listInfos[i][j]['ErrCount']+'</td>';
tableStr +='<td>'+listInfos[i][j]['ErrorRate']+'</td>';
tableStr +='<td>'+listInfos[i][j]['DaySystemErrorCount']+'</td>';
tableStr +='<td>'+listInfos[i][j]['DaySystemrErrorRate']+'</td>';
tableStr +='</tr>';
}
tableStr +='</tbody></table>';
tableStrList += tableStr
}
document.getElementById("html").innerHTML=tableStrList;
}
sortOperation(listInfos,'DayCount','asc')
</script>
您可能感興趣的文章:
- Javascript 表格操作實(shí)現(xiàn)代碼
- 基于javascript實(shí)現(xiàn)表格的簡(jiǎn)單操作
- javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作
- javascript實(shí)現(xiàn)表格增刪改操作實(shí)例詳解
- javascript操作表格排序?qū)嵗治?/a>
- JavaScript表格常用操作方法匯總
- JavaScript DOM操作表格及樣式
- JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)
- javascript操作表格
- JScript實(shí)現(xiàn)表格的簡(jiǎn)單操作
相關(guān)文章
JavaScript實(shí)現(xiàn)函數(shù)緩存及應(yīng)用場(chǎng)景
在JavaScript中,可以通過函數(shù)緩存來提高函數(shù)的執(zhí)行效率,本文就來介紹一下JavaScript實(shí)現(xiàn)函數(shù)緩存及應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01javascript中$(function() {});寫與不寫有哪些區(qū)別
javascript中$(function() {....}) 是jQuery中的經(jīng)典用法,等同于 $(document).ready(function() {....}) javascript中$(function() {});寫與不寫有哪些區(qū)別,需要的朋友可以參考下2015-08-08擴(kuò)展IE中一些不兼容的方法如contains、startWith等等
擴(kuò)展IE中一些不兼容的方法如contains方法、startWith方法等等,下面是具體的實(shí)現(xiàn)代碼,喜歡的朋友可以參考下2014-01-01js判斷undefined類型,undefined,null, 的區(qū)別詳細(xì)解析
本篇文章主要是對(duì)js判斷undefined類型,undefined,null,NaN的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式,結(jié)合實(shí)例形式分析了javascript簡(jiǎn)單工廠模式基本概念、原理、定義、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04經(jīng)典面試題之JavaScript?for循環(huán)(var?let)
如果你也在面試找工作,那么也一定遇到過這道for循環(huán)打印結(jié)果的題,下面我們來探討下,對(duì)經(jīng)典面試題之js?for循環(huán)相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-10-10