对javascript表格中的元素进行排序(正序和倒序)
<!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.2cto.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>
