您的位置：首页 > Web前端 > JavaScript

对javascript表格中的元素进行排序(正序和倒序)

2012-03-19 22:13 453 查看

<!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,然后按邮箱排序,字母排序

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航