<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<!–去除下劃線–>
<style type="text/css">
a{text-decoration:none;}
</style>
<script type="text/javascript">
/*
* 對javascript表格中的元素進行排序(正序和倒序)
* 知識點:其中使用瞭冒泡排序
* 數組中的兩個數據的交換
*/
var nameTimes = 0; //為瞭讓各自的元素排序,互不影響,為每個排序,添加一個統計次數
var ageTimes = 0;
var emailTimes = 0;
function sortByName(){
//獲取tbody中所有的tr,然後按名字排序,內部是按碼表值排序
var trArr = document.getElementsByTagName("tbody")[0].rows; //獲取TBODY中的所有TR
for(var i = 0; i < trArr.length – 1; i++)
for(var j = 0; j < trArr.length – 1 – i; j++)
if(nameTimes % 2 == 0 ?
(trArr[j].cells[0].innerHTML) > (trArr[j+1].cells[0].innerHTML)
: (trArr[j].cells[0].innerHTML) < (trArr[j+1].cells[0].innerHTML))
trArr[j].swapNode(trArr[j + 1]);
nameTimes++;
}
function sortByAge(){
//獲取tbody中所有的tr,然後按年齡排序
var trArr = document.getElementsByTagName("tbody")[0].rows;
for(var i = 0; i < trArr.length – 1; i++)
for(var j = 0; j < trArr.length – 1 – i; j++)
if(ageTimes % 2 == 0 ?
parseInt(trArr[j].cells[1].innerHTML) > parseInt(trArr[j+1].cells[1].innerHTML)
: parseInt(trArr[j].cells[1].innerHTML) < parseInt(trArr[j+1].cells[1].innerHTML))
trArr[j].swapNode(trArr[j + 1]);
ageTimes++;
}
function sortByEmail(){
//獲取tbody中所有的tr,然後按郵箱排序,字母排序www.aiwalls.com
var trArr = document.getElementsByTagName("tbody")[0].rows;
for(var i = 0; i < trArr.length – 1; i++)
for(var j = 0; j < trArr.length – 1 – i; j++)
if(emailTimes % 2 == 0 ?
(trArr[j].cells[2].innerHTML) > (trArr[j+1].cells[2].innerHTML)
: (trArr[j].cells[2].innerHTML) < (trArr[j+1].cells[2].innerHTML))
trArr[j].swapNode(trArr[j + 1]);
emailTimes++;
}
</script>
</head>
<body>
<table width=60% border=1px cellspacing=0px cellpadding=5px align=center>
<thead>
<tr>
<th><a href="javascript:sortByName()">姓名</a></th>
<th><a href="javascript:sortByAge()">年齡</a></th>
<th><a href="javascript:sortByEmail()">郵箱</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>鄭立傑</td>
<td>27</td>
<td>zlj@gmail.com</td>
</tr>
<tr>
<td>趙崢</td>
<td>18</td>
<td>zj@163.com</td>
</tr>
<tr>
<td>呂佩</td>
<td>18</td>
<td>lp@sina.com.cn</td>
</tr>
<tr>
<td>張紀強</td>
<td>8</td>
<td>zjq@qq.com</td>
</tr>
<tr>
<td>杜超</td>
<td>22</td>
<td>dc@hotmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
摘自 代俊建的專欄
