javascript 表格内容排序 简单操作示例代码
作者:互联网
2025-08-15
复制代码代码如下:
< 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 cellspacing="0" cellpadding="0" >< tbody >< tr >';
tableStr +='< td >程序名称< /td >< td >当天访问量(次)< /td >< td >平均响应时间(us)< /td >< td >错误数(次)< /td >';
tableStr +='< td >错误率(%)< /td > < td >系统错误数(次)< /td > < td >系统错误率(%)< /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 >
相关标签:
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
5.响应式系统比对:手写 React 响应式状态库 Mobx
踩坑分享:Vite Plus 最佳实践
VTJ核心引擎开源项目概览
你的 Vue 3 TS 类型声明,VuReact 会处理成什么样的 React?
Element Plus 主题构建方案
Vue 组件间通信
你的 Vue 3 <script setup>,VuReact 会编译成完整的 React 组件
vue3+typescript+vite封装自己的UI组件库并上传至npm
都知道AI大模型能生成文本内容,那你知道大模型是怎样生成文本的吗?
vue3 数据响应式遇到的问题
AI精选
