首页 > 代码库 > 使用js实现表头排序
使用js实现表头排序
工作中遇到需要表头排序的地方，我从网上参考很一些东西，汇总一下，写出来这个排序函数，这个运用了array对象的sort()方法，感觉还不错，实现的逻辑比较简单。还有就是排序列是时间格式，用到了正则表达式做了个替换，并转化为时间对象，这两点是整个排序所用到的关键技术
<html>
<head>
</head>
<body>
<table id="tbSort">
<thead>
<tr>
<th onclick="sortTime(this);">日期</th><th>数字</th><th>字符串</th>
</tr>
</thead>
<tbody>
<tr>
<td>2014-10-12 10:20</td>
<td>1</td>
<td>李孟宁</td>
</tr>
<tr>
<td>2014-10-12 10:21</td>
<td>1</td>
<td>Tom</td>
</tr>
<tr>
<td>2014-10-12 10:22</td>
<td>1</td>
<td>Jerry</td>
</tr>
<tr>
<td>2014-10-11</td>
<td>3</td>
<td>Lina</td>
</tr>
<tr>
<td>2014-4-22</td>
<td>2</td>
<td>Steven</td>
</tr>
<tr>
<td>2014-11-1</td>
<td>5</td>
<td>John</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
function sortTime(title) { //title参数是所点击的表头所在的单元格对象
var a = title.cellIndex; //获取其单元格在本列中的位置
var table = document.getElementById("tbSort").tBodies[0]; //获取到table的第一个tbody对象(当然这里只有一个)
var rows = table.rows;
var arr = new Array(); //声明一个array对象来储存rows
for (var i = 1; i < rows.length; i++) {
arr.push(rows[i]); //将rows存储至array数组
}
if (table.sortFlag == a) { //使用table对象的sortFlag属性作为排序的标记，如果这个标记等于当前列，则按此列倒序输出
arr.reverse();
}
else { //如果排序的不是此列，则进行排序
arr.sort(function(r1, r2) { //使用array对象的sort函数，这里因为是日期时间排序，所以要给出自定义的比较函数来判断两个值的大小，
var t1 = new Date(r1.cells[a].innerHTML.replace(/-/g, "/")); //格式为：function(a,b){}比较a,b返回比较结果
var t2 = new Date(r2.cells[a].innerHTML.replace(/-/g, "/")); //如果a>b，则返回正整数，a=b返回0，a<b返回负整数
if (t1 < t2) return -1; //replace函数进行正则表达式的替换，然后创建出t1，t2的Date类型的变量，以便比较
else if (t1 > t2) return 1;
else return 0;
});
}
for (var i = 0; i < arr.length; i++) {
table.appendChild(arr[i]); //将排序结果输出到table中。
}
table.sortFlag = a;
}
</script>
使用js实现表头排序