广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

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

    2018-04-06 10:40:37 次阅读 稿源:互联网
    零七广告

    <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>

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告