工作中遇到需要表头排序的地方,我从网上参考很一些东西,汇总一下,写出来这个排序函数,这个运用了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>