多种方式对二维数组进行排序，动态添加到页面

来源：互联网发布：java将html转换成pdf 编辑：程序博客网时间：2024/06/15 08:37
<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>IFE JavaScript Task 01</title></head><body><h3>污染城市列表</h3> <ul id="aqi-list">  <!-- <li>第一名：福州（样例），10</li> <li>第二名：福州（样例），10</li> --> </ul><script type="text/javascript">  var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 50], ["成都", 90], ["西安", 100] ];// 方法一变量拼接的方式 /* (function(){    var ul=document.getElementById('aqi-list');    var arr=['一',"二","三","四","五"];    aqiData.sort(function(a,b){return b[1]-a[1]});    var html="";    for(var i=0;i<aqiData.length;i++){      if(aqiData[i][1]>60){        html+="<li>"+"第"+arr[i]+"名："+aqiData[i][0]+","+aqiData[i][1]+"</li>";      }    }    ul.innerHTML=html;  })();*///  方法2 ：利用代码片段 /* (function(){   var ul=document.getElementById('aqi-list');   var arr=['一',"二","三","四","五"];   aqiData.sort(function(a,b){return b[1]-a[1]});   var frag=document.createDocumentFragment();//创建一个代码片段   for(var i=0;i<aqiData.length;i++){   if(aqiData[i][1]>60){     var html=document.createElement('li');     html.innerHTML="第"+arr[i]+"名:"+aqiData[i][0]+","+aqiData[i][1];     frag.appendChild(html);//向代码片段追加元素   }   }  ul.appendChild(frag);//将代码片段追加到页面上   })();*/  //  方法2 ：利用filter,先进行刷选，在排序  (function(){   var ul=document.getElementById('aqi-list');   var arr=['一',"二","三","四","五"];    var content="";    aqiData.filter(function(element){return element[1]>60})      .sort(function(a,b){return b[1]-a[1]})      .forEach(function(element,i){        content+="<li>第"+arr[i]+"名:"+element[0]+","+element[1]+"</li>";    });   ul.innerHTML=content;//将代码片段追加到页面上   })();</script></body>
2 0