首页 / 脚本样式 / JavaScript / 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>