javascript 表格内容排序简单操作示例代码

192 阅读 0 评论 127 点赞

我是靠谱客的博主无奈西装，最近开发中收集的这篇文章主要介绍javascript 表格内容排序简单操作示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<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('操作错误...'); 
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%">当天访问量(次)</td><td width="14%">平均响应时间(us)</td><td width="14%">错误数(次)</td>'; 
tableStr +='<td width="14%">错误率(%)</td> <td width="14%">系统错误数(次)</td> <td width="14%">系统错误率(%)</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> 