有一個(gè)二維表格,表格中的每一列分別有一個(gè)列名,表格中的數(shù)據(jù)為數(shù)字類型,要求編寫一個(gè)程序,能夠按照用戶指定的列順序以及每個(gè)列的升降序進(jìn)行排序。
(1) 語(yǔ)言不限
(2) 表格中的列數(shù)目不限(1-n)
(3) 排序的列數(shù)目不限(0-n)
(4) 變量的命名和使用要符合學(xué)習(xí)的內(nèi)容
例如:
Id Age Score1 Score2 Score3
1 20 45 56 67
3 33 12 98 100
…..
7 77 33 12 91
用戶可以指定按照Age(升序),Score2(降序)的順序?qū)?shù)據(jù)進(jìn)行排序。
代碼如下:
<!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">
// 二維數(shù)字?jǐn)?shù)組
var clmArr = new Array();
clmArr=[ [1,5,456,6,89], [2,51,515,32,15],[3,45,68,24,6] ];
// 要根據(jù)排序的列
var orderByTheObject = 0;
// 排序方式
var orderByTheOrder = 1;

// 排序函數(shù)
function arrSort(arrA,arrB){
if (orderByTheOrder == "asc") {
return arrA[orderByTheObject]-arrB[orderByTheObject];
} else if (orderByTheOrder == "desc")
{
return arrB[orderByTheObject]-arrA[orderByTheObject];
}
}

// 畫(huà)表格,輸出二維數(shù)組
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>
這樣的代碼似乎有些格路。但還是讓我學(xué)到了些東西。
用Comparator這個(gè)接口來(lái)做應(yīng)該更標(biāo)準(zhǔn)一些,有時(shí)間再試試吧。
(1) 語(yǔ)言不限
(2) 表格中的列數(shù)目不限(1-n)
(3) 排序的列數(shù)目不限(0-n)
(4) 變量的命名和使用要符合學(xué)習(xí)的內(nèi)容
例如:
Id Age Score1 Score2 Score3
1 20 45 56 67
3 33 12 98 100
…..
7 77 33 12 91
用戶可以指定按照Age(升序),Score2(降序)的順序?qū)?shù)據(jù)進(jìn)行排序。
代碼如下:



















































































這樣的代碼似乎有些格路。但還是讓我學(xué)到了些東西。
用Comparator這個(gè)接口來(lái)做應(yīng)該更標(biāo)準(zhǔn)一些,有時(shí)間再試試吧。
歡迎來(lái)訪!^.^!
本BLOG僅用于個(gè)人學(xué)習(xí)交流!
目的在于記錄個(gè)人成長(zhǎng).
所有文字均屬于個(gè)人理解.
如有錯(cuò)誤,望多多指教!不勝感激!