hmtl实现一个点击表头，对表格进行升序或降序排序

最新推荐文章于 2022-03-31 15:03:10 发布

qq_40315971

最新推荐文章于 2022-03-31 15:03:10 发布

阅读量538

点赞数 3

本文链接：https://blog.csdn.net/qq_40315971/article/details/120141097

版权

<!DOCTYPE html>
<html>

<head>
<title>表格点击头部排序</title>
<style>
  table{
    border-collapse: collapse;
    width: 360px;
    table-layout: fixed;
}
thead{
    background: #f5f7fa;
}
thead th{
    font-weight: strong;
    cursor: pointer;
}
thead th:hover{
    color: #25bb9b;
}
td,th{
    border: 1px solid #e1e1e1;
    padding: 0;
    text-align: center;
    padding: 10px 0;
}
</style>
</head>

<body>
  <div class="container">
    <table id='table'>
        <thead>
            <tr><th>ID</th><th>号码</th><th>score</th></tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>60006</td><td>22</td></tr>
            <tr><td>2</td><td>20002</td><td>11</td></tr>
            <tr><td>3</td><td>30003</td><td>66</td></tr>
            <tr><td>4</td><td>10001</td><td>33</td></tr>
            <tr><td>5</td><td>50005</td><td>44</td></tr>
            <tr><td>6</td><td>40004</td><td>55</td></tr>
        </tbody>
    </table>
</div>

  <script>
    const order = {
   // 将表头th的index和是否升序进行映射
    mapThToAsc: {
      0: true,
      1: false,
      2: false
    } , 
    init (param) {
        const that = this;
        const table = param.el;
        // 是否升序
        if (!table) return;
        // 获取tbody节点
        const tbody = document.getElementsByTagName('tbody')[0];
        //  获取所有th节点，并将其转为数组
        const ths = [].slice.call(document.getElementsByTagName('th'));
        // 获取所有tr节点，并将其转为数组,这里获取tbody里面的tr
        const trs = [].slice.call(tbody.rows);
        const list = this.getBodyList(trs);
        ths.forEach((th, index) => {
            
            // 请为th绑定点击事件
            th.addEventListener('click', () => {
                //  判断当前数据是否为升序
                const isAsc = this.isAsc(list, index);
                // 改变当前th的升序情况
                this.mapThToAsc[index] = !this.mapThToAsc[index]；
                //  如果当前为升序，则将list降序排序；如果当前为降序，则将list升序排序；
                list.sort((a, b) => isAsc ? b.value[index]-a.value[index] : a.value[index] - b.value[index]);
                // 将排序后的list重新插入tbody中
                // 先将tbody删除     document.getElementById('table').removeChild(document.getElementsByTagName('tbody')[0])
                let creBody =  document.createElement("tbody");
                for(let i=0, size = list.length; i< size; i++) {
                  creBody.appendChild(list[i].tr)
                }
                table.appendChild(creBody)
            });
        });
    },
    getBodyList (trs) {
        return trs.map(tr => {
            // TODO: 获取tr的所有td节点，并将其转为数组
            console.log('tr', tr)
            const tds = [].slice.call(tr.children)
            console.log('tds in getbody', tds)
            // TODO: 将td的内容转为数字，��换下面0的值
            const val = tds.map(td => parseInt(td.innerText));
            return {tr: tr, value: val};
        });
    },
    isAsc (list, index) {
        // TODO: 判断list的value中第index个值是否为升序排列
        if(this.mapThToAsc[index]) { // 已经是升序
          return true;
        }
        return false;
    }
};

order.init({
    // TODO: 请获取class=container下的table的节点， 也可以
    el: document.getElementById('table')
});
  </script>


</body>

</html>

备注：目前只是把表格的内容转化为数字进行排序比较。

如果是字符串比较,可以把sort的比较函数写为

list.sort((a,b) => a.localeCompare(b))