JavaScript實現表格的排序
阿新 • • 發佈：2019-01-24
利用JS實現表格排序，依賴於JS陣列中Array物件的sort方法
首先介紹一下sort()方法：
1.定義和用法：
sort()方法用於對陣列元素的排序
2.語法：
arrayObject.sort(sortRule);
3.引數：
sortRule ：可選。規定排序順序。必須是函式。
4.返回值：
對陣列的引用。陣列在原陣列上進行排序，不生成副本。
5.說明：
如果呼叫該方法時沒有使用引數，將按字母順序對陣列中的元素進行排序，也就是按字元編碼順序進行排序。要實現這一點，首先應把陣列的元素都轉換成字串（如果有必要），以便進行比較。
如果想按照其他標準進行排序，就需要提供比較函式，該函式要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函式應該具有兩個引數a和b，其返回值如下：
- 若a<b，則排序後的陣列中的a應該出現在b之前，則返回一個小於0的值
- 若a=b，則返回0
- 若a>b，則返回一個大於0的值
Example 1：
建立一個數組，並字母順序進行排序：
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />") document.write(arr.sort()) </script>
輸出結果：
Adrew,George,James,John,Martin,Thomas
Example 2：
建立一個數組，並按字母順序排序，需要實現排序函式：
<script type="text/javascript"> function sortNumber(a,b) { return a - b } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script>
輸出結果：
1,5,10,25,40,1000
下面是對一個表格實現的排序：
(完全可以執行)
<html>
<head>
<title>Super Link</title>
<script laguage="javascript">
function generateCompare(iCol){
return function compare(tr1,tr2){
var v1=tr1.cells[iCol].firstChild.nodeValue;
var v2=tr2.cells[iCol].firstChild.nodeValue;
if(iCol==0){ //序號列，降序
if(parseInt(v1)>parseInt(v2))
return -1;
else if(parseInt(v1)<parseInt(v2))
return 1;
else
return 0;
}else{ //姓名列，升序
if(v1>v2)
return 1;
else if(v1<v2)
return -1;
else
return 0;
}
}
}
function sortTable(iCol){
var oTable=document.getElementById("tblSort");
var oBody=oTable.tBodies[0];
var aRows=oBody.rows;
var a=new Array;
for(var i=0;i<aRows.length;i++){
a.push(aRows[i]);
}
a.sort(generateCompare(iCol));
var ofrag=document.createDocumentFragment();
for(var i=0;i<a.length;i++){
ofrag.appendChild(a[i]);
}
oBody.appendChild(ofrag);
}
</script>
</head>
<body>
<input type="button" value="按序號降序排列" onclick="sortTable(0)">
<br>
<br>
<input type="button" value="按姓名升序排列" onclick="sortTable(1)">
<br>
<br>
<table border="1" id="tblSort">
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>王明</td>
</tr>
<tr>
<td>12</td>
<td>超人</td>
</tr>
<tr>
<td>3</td>
<td>張三</td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
</tr>
</tbody>
</table>
</body>
</html>