网站开发中凡是用到表格来展示数据的，往往都要根据某个列来对行排序，下面是我从书上看到的一个行排序例子，看过后受益匪浅，故分享出来。
直接献上完整代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Javascript原生代码实现表格排序</title>
<script type="text/javascript">
//根据指定表格每行第n个单元格的值，对第一个tbody中的行进行排序
//如果存在comparator函数则使用它，否则按字母表顺序比较
function sortRows(table,n,comparator){
var tbody = table.tBodies[0];
var rows = tbody.getElementsByTagName("tr");
rows = Array.prototype.slice.call(rows,0);//转化为真实数组
//基于第n个<td>元素的值对行排序
rows.sort(function(row1,row2){
var cell1 = row1.getElementsByTagName("td")[n];
var cell2 = row2.getElementsByTagName("td")[n];
var val1 = cell1.textContent || cell1.innerText;//IE兼容
var val2 = cell2.textContent || cell2.innerText;
if(comparator) return comparator(val1,val2);
if(val1<val2) return -1;
else if(val1>val2) return 1;
else return 0;
});
for(var i=0;i<rows.length;i++) tbody.appendChild(rows[i]); //原先的会自动移除
}
//查找表格的<th>元素（假设只有一行），让它们可单击，以便单击该列对行排序
function makeSortTable(table){
var headers = table.getElementsByTagName("th");
for(var i=0;i<headers.length;i++){
(function(n){ //嵌套函数来创建本地作用域 （这段代码自己也不太懂，自己试过把嵌套函数去掉，但结果出错，希望看懂这段代码的人也教教我）
headers[i].onclick = function(){sortRows(table,n);};
}(i));
}
}
window.onload = function(){
var table = document.getElementById("table");
makeSortTable(table);
}
</script>
<style type="text/css">
table{
table-layout: auto;
border-collapse: collapse;
}
th{
border: solid 1px rgb(0,0,0);
cursor:pointer;
}
th:hover{
background: red;
}
td{
border: solid 1px rgb(0,0,0);
}
</style>
</head>
<body>
<table id="table">
<thead><tr><th>Name</th><th>age</th></tr></thead>
<tr><td>lhm</td><td>24</td></tr>
<tr><td>hyl</td><td>25</td></tr>
<tr><td>hs</td><td>28</td></tr>
<tr><td>cg</td><td>23</td></tr>
<tr><td>yqf</td><td>23</td></tr>
<tr><td>wqz</td><td>38</td></tr>
<tr><td>xf</td><td>45</td></tr>
</table>
</body>
</html>
时间： 2024-12-31 03:47:45