原生js实现表格按列排序

最新推荐文章于 2023-09-03 00:17:20 发布

qq_1715

最新推荐文章于 2023-09-03 00:17:20 发布

阅读量771

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44617099/article/details/120127127

版权

点击表头，按该列的元素进行排序

<body>
  <table class="container">
    <thead>
      <th>ID</th>
      <th>QQ</th>
      <th>score</th>
    </thead>
    <tbody>
      <tr><td>1</td><td>10.0</td><td>800</td></tr>
      <tr><td>2</td><td>30.0</td><td>600</td></tr>
      <tr><td>3</td><td>20.5</td><td>700</td></tr>
      <tr><td>4</td><td>40.5</td><td>500</td></tr>
      <tr><td>5</td><td>60.5</td><td>300</td></tr>
      <tr><td>6</td><td>50.0</td><td>400</td></tr>
      <tr><td>7</td><td>70.0</td><td>200</td></tr>
      <tr><td>8</td><td>80.5</td><td>100</td></tr>
    </tbody>
  </table>
  <script>
    const order = {
      init(param) {
        const that = this;
        const table = param.el;
        if (!table) return;
        // TODO: 获取tbody节点
        const tbody = table.getElementsByTagName('tbody')[0];
        console.log(tbody);
        // TODO: 获取所有th节点，并将其转为数组
        const ths = Array.prototype.slice.call(table.getElementsByTagName('th'))
        // TODO: 获取所有tr节点，并将其转为数组
        const trs = Array.prototype.slice.call(table.getElementsByTagName('tr'))
        const list = this.getBodyList(trs.slice(1));

        ths.forEach((th, index) => {
          // TODO: 请为th绑定点击事件
          th.addEventListener('click', () => {
            // TODO: 判断当前数据是否为升序
            const isAsc = this.isAsc(list, index);
            // TODO: 如果当前为升序，则将list降序排序；如果当前为降序，则将list升序排序；
            list.sort((a, b) => isAsc ? b.value[index] - a.value[index] : a.value[index] - b.value[index]);
            // TODO: 将排序后的list重新插入tbody中
            for (let i = 0; i < list.length; i++) {
              let str = ''
              for (let j = 0; j < list[i].value.length; j++) {
                str += `<td>${list[i].value[j]}</td>`;
              }
              list[i].tr.innerHTML = str;
            }
            let htmlstr = ''
            for (let i = 0; i < list.length; i++) {
              htmlstr += "<tr>" + list[i].tr.innerHTML + "</tr>";
            }
            tbody.innerHTML = htmlstr
          });
        });
      },
      getBodyList(trs) {
        return trs.map((tr, index) => {
          // TODO: 获取tr的所有td节点，并将其转为数组
          const tds = Array.prototype.slice.call(tr.children)
          // TODO: 将td的内容转为数字，��换下面0的值
          const val = tds.map(td => td.innerHTML);
          return { tr: tr, value: val };
        });
      },
      isAsc(list, index) {
        // TODO: 判断list的value中第index个值是否为升序排列
        for (let i = 1; i < list.length; i++) {
          if (Number.parseInt(list[i].value[i]) < Number.parseInt(list[i].value[i - 1])) {
            return false;
          }
        }
        return true;
      }
    };

    order.init({
      // TODO: 请获取class=container下的table的节点
      el: document.getElementsByClassName('container')[0]
    });
  </script>
</body>

qq_1715

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
原生js实现表格按列排序

点击表头，按该列的元素进行排序<body> <table class="container"> <thead> <th>ID</th> <th>QQ</th> <th>score</th> </thead> <tbody> <tr><td>1</td><td&
复制链接

扫一扫