利用数组的Sort方法实现表格点击排序

这里的重点是对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