本文為大家詳細介紹下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>