代码练习（二维数组的定义，字符串加减，子元素的创建及绑定，排序算法）
Posted kkdf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了代码练习（二维数组的定义，字符串加减，子元素的创建及绑定，排序算法）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>IFE javascript Task 01</title> </head> <body> <ul id="source"> <li>北京空气质量：<b>90</b></li> <li>上海空气质量：<b>70</b></li> <li>天津空气质量：<b>80</b></li> <li>广州空气质量：<b>50</b></li> <li>深圳空气质量：<b>40</b></li> <li>福州空气质量：<b>32</b></li> <li>成都空气质量：<b>90</b></li> </ul> <ul id="resort"> <!-- <li>第一名：北京空气质量：<b>90</b></li> <li>第二名：北京空气质量：<b>90</b></li> <li>第三名：北京空气质量：<b>90</b></li> --> </ul> <button id="sort-btn">排序</button> <script type="text/javascript"> /** * getData方法 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量 * 返回一个数组，格式见函数中示例 */ function getData() { var source=document.getElementsByTagName("li"); var number=document.getElementsByTagName("b"); var data=new Array(7); for(var i=0;i<data.length;i++) {data[i]=new Array(2);}; //在JavaScript中定义二维数组 var i=0; while(source[i]) { data[i][0]=source[i].innerText.replace(number[i].innerText,""); //字符串的加减用到replace函数 data[i][1]=number[i].innerText;i++; }; return data; } function sortAqiData(data) { var j=0,i; while(j<6) //将二维数组按照其中一位数字大小进行排序 { i=j+1; while(i<7) { if(data[j][1]<data[i][1]) {var temp=data[j];data[j]=data[i];data[i]=temp;}i++; };j++; }; return data; } function render(data) { var i=0; while(i<data.length) { var wrote=document.createElement("li");i++; wrote.innerText="第"+i+"名"+data[i-1][0]+""+data[i-1][1]; var resort=document.getElementById("resort"); resort.appendChild(wrote); //注意，在绑定父元素子元素前，应先创建子元素，添加内容 } } function btnHandle() { var aqiData = getData(); aqiData = sortAqiData(aqiData); render(aqiData); } function init() { var button=document.getElementById("sort-btn"); button.addEventListener("click",btnHandle); // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数 } init(); </script> </body> </html>
以上是关于代码练习（二维数组的定义，字符串加减，子元素的创建及绑定，排序算法）的主要内容，如果未能解决你的问题，请参考以下文章