JavaScript 實現表格排序
用於動態排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>學號</th>
<th>名字</th>
<th id="sort">成績</th>
</tr>
<tr>
<td>1002</td>
<td>小銘</td>
<td>34</td>
</tr>
<tr>
<td>1003</td>
<td>小紅</td>
<td>64</td>
</tr>
<tr>
<td>1004</td>
<td>小黃</td>
<td>24</td>
</tr>
</table></body></html>
js程式碼
<script> //取得 id 為 sort的Element
var sort = document.getElementById('sort');
//正序 or 倒序
var up = true;
sort.onclick = function()
{
//取得Table Tag (由於只有一個 因此取[0])
var table = document.getElementsByTagName('table')[0];
//取得tr Tag 走訪tag
var tr = table.getElementsByTagName('tr');
//新 array 用於儲存 tr 的資料
var array = [];
for (var i = 1;i < tr.length;i++)
{
array.push(tr[i]);
}
//如果 up 是 up 則正序 否則逆序
if (up)
{
SortUp (array);
up = false;
}
else
{
SortDown (array);
up = true;
}
for (var i = 0; i < array.length; i++)
{
//重新編排table順序 依照array
table.appendChild(array[i]);
}
}
//正序
function SortUp(array)
{
//以array排序
for (var i = 0;i < array.length;i++)
{
for (var j = i + 1;j < array.length;j++)
{
if (array[j] === undefined)
{
continue;
}
// 泡泡排序
if (array[i].getElementsByTagName('td')[2].innerText <= array[j].getElementsByTagName('td')[2].innerText)
{
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
}
}
//逆序
function SortDown(array)
{
//以array排序
for (var i = 0;i < array.length;i++)
{
for (var j = i + 1;j < array.length;j++)
{
if (array[j] === undefined)
{
continue;
}
// 泡泡排序
if (array[i].getElementsByTagName('td')[2].innerText >= array[j].getElementsByTagName('td')[2].innerText)
{
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
}
}
</script>
留言
張貼留言