练习题---JS排序

最新推荐文章于 2022-05-02 22:34:16 发布

iteye_17346

最新推荐文章于 2022-05-02 22:34:16 发布

阅读量206

点赞数

文章标签： JavaScript CSS HTML ViewUI

本文介绍了一个简单的JavaScript程序，用于实现对二维数字数组的排序。通过选择不同的列和排序方式（升序或降序），用户可以直观地看到数据变化。程序利用HTML和JavaScript实现，并提供了交互式的界面供用户操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有一个二维表格，表格中的每一列分别有一个列名，表格中的数据为数字类型，要求编写一个程序，能够按照用户指定的列顺序以及每个列的升降序进行排序。
（1）       语言不限
（2）       表格中的列数目不限（1-n）
（3）       排序的列数目不限（0-n）
（4）       变量的命名和使用要符合学习的内容
例如：
Id    Age   Score1 Score2 Score3
1     20     45      56      67
3     33     12      98      100
…..
7     77     33       12      91
用户可以指定按照Age（升序），Score2（降序）的顺序对数据进行排序。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<style type="text/css">

body {

}{ font-size:1em;}

div,h1,h3 {

}{ text-align : center; }

td.head {

}{ width:120px;background-color:#dddddd;font-weight:bold;}

td.data {

}{ width:120px;background-color:#eeeeee;}

</style>

<script type="text/javascript" language="Javascript">

// 二维数字数组

var clmArr = new Array();

clmArr=[ [1,5,456,6,89], [2,51,515,32,15],[3,45,68,24,6] ];

// 要根据排序的列

var orderByTheObject = 0;

// 排序方式

var orderByTheOrder = 1;

// 排序函数

function arrSort(arrA,arrB)

{

if (orderByTheOrder == "asc")

{

return arrA[orderByTheObject]-arrB[orderByTheObject];

} else if (orderByTheOrder == "desc")

{

return arrB[orderByTheObject]-arrA[orderByTheObject];

}

}

// 画表格，输出二维数组

function writeTable()

{

var outString = "<table>";

for(var i=0; i<clmArr.length; i++)

{

outString += "<tr><td class='data'>"+ clmArr[i].join("</td><td class='data'>") +"</td></tr>";

}

outString += "</table>";

document.getElementById("data").innerHTML = outString;

}

// 改变排序方式

function displayChange()

{

orderByTheObject = document.getElementById("clmName").value;

orderByTheOrder = document.getElementById("order").value;

clmArr.sort(arrSort);

writeTable();

}

</script>

</head>

<body scroll="no" onload="writeTable()">

<h1>YW5_Test02</h1>

<hr>

<h3>Order By :</h3>

<div id="slct">

<select name="clmName" onchange="displayChange()">

<option value="0">Id</option>

<option value="1">Age</option>

<option value="2">Score1</option>

<option value="3">Score2</option>

<option value="4">Score3</option>

</select>    

<select name="order" onchange="displayChange()">

<option value="asc">asc</option>

<option value="desc">desc</option>

</select>

</div>

<br>

<br>

<div id="head">

<table>

<tr>

<td class="head">Id</td>

<td class="head">Age</td>

<td class="head">Score1</td>

<td class="head">Score2</td>

<td class="head">Score3</td>

</tr>

</table>

</div>

<div id="data">

<span></span>

</div>

</body>

</html>

这样的代码似乎有些格路。但还是让我学到了些东西。

用Comparator这个接口来做应该更标准一些，有时间再试试吧。

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。