js二维数字数组排序，添加内容到标签

最新推荐文章于 2023-02-23 19:00:45 发布

我是希希呀biubiubiu

最新推荐文章于 2023-02-23 19:00:45 发布

阅读量524

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript jquery 排序

本文链接：https://blog.youkuaiyun.com/qq_35095321/article/details/62889665

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用JavaScript编写的网页应用，该应用能够根据空气质量指数(AQI)对城市进行排序并展示AQI大于60的城市。通过遍历数据数组，筛选出符合条件的城市，并将其排名及AQI动态添加到HTML列表中。

原题：

<!DOCTYPE html>
<html>
  <head>
    <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 () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */

})();

</script>
</body>
</html>

完成后：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> 
<title>IFE JavaScript Task 01</title>
</head>

<body>
	<h3>污染城市列表</h3>
  <ul id="aqi-list">
  </ul>

<script type="text/javascript">

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

window.onload=function(){
	//给二维数组第二列排序
    aqiData.sort(function(a,b){
		return a[1]-b[1];
	});
	
	var aqi_li="";
	var j=1;
	//排除小于等于60，并显示大于60显示到aqi-list的列表中	
	for(var i=0;i<aqiData.length;i++){
		if(	aqiData[i][1]>60){
			aqi_li+="<li>第"+j+"名："+aqiData[i][0]+"，"+aqiData[i][1]+"</li>";	
			j++;
		}
	}
	$("#aqi-list").html(aqi_li);
}

</script>
</body>
</html>