您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

javascript实现表格内容排序

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 本文为大家详细介绍下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>