这里的重点是对JavaScript数组中的sort方法的运用,例子本身比较简单,具体实现的效果就是:点击thead里面的th时,对应tbody里面的那一列的内容会自动根据大小排序。
有几个实用的知识点:
1、利用js给元素添加index属性,并为其赋索引值
2、sort方法在没有传递参数的情况下是按照 ASCII 字符顺序排序的,所以当要排序的内容既有数字又有内容为数字的字符串时,最终的排序结果并不是我们想要的,但我们可以给其传递一个自定义排序函数来实现排序,且该比较函数只能比较数字
arr.sort(function (x , y){
return x - y;
})
现在假设有这样一个表格结构:
<table id="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>17</td>
<td>5</td>
<td>12</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>7</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>9</td>
</tr>
<tr>
<td>13</td>
<td>6</td>
<td>4</td>
<td>29</td>
<td>5</td>
</tr>
<tr>
<td>8</td>
<td>2</td>
<td>6</td>
<td>3</td>
<td>9</td>
</tr>
<tr>
<td>6</td>
<td>12</td>
<td>8</td>
<td>3</td>
<td>5</td>
</tr>
</tbody>
</table>
CSS如下:
*{margin:0;padding:0;}
table{border-collapse:collapse;width:200px;margin:50px auto;text-align:center;}
th, td { border: 1px solid #e9e9e9; padding: 10px; }
th{background:#4784a3;color:#fff;cursor:pointer;}
JavaScript如下:
window.onload = function () {
//获取table和触发点击事件的th元素
var table = document.getElementById('table');
var th = table.getElementsByTagName('th');
//遍历th并且给其加上onclick事件
for (var j = 0; j < th.length; j++) {
//给每个th都添加一个index属性,并给其赋一个索引值
th[j].index = j;
//绑定onclick事件处理函数
th[j].onclick = function () {
//获取当前的索引值
var index = this.index;
//将需要排序的的body里面的tr全部推到一个数组里面
var arr = [];
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
arr[i] = table.tBodies[0].rows[i];
}
//利用数组的sort方法对表格里面的内容进行比较和排序
arr.sort(function (tr1, tr2) {
//比较th所在那一列的td里面的内容---注意这里的index为被点击的th的index属性值
//因为自定义比较函数只能比较数字,所以得用parseInt将其转换为整数类型
var n1 = parseInt(tr1.cells[index].innerHTML);
var n2 = parseInt(tr2.cells[index].innerHTML);
return n1 - n2;
});
//将排好序的数组重新插回tbody中
for (var i = 0; i < arr.length; i++) {
table.tBodies[0].appendChild(arr[i]);
}
}
}
}
最终效果参加表格排序
关于sort方法可以参见《JavaScript高级程序设计》一书
Ref: http://www.qdfuns.com/archives/2013379