利用js交换table中的两列

原创于 2019-07-24 14:06:07 发布 · 853 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

html 同时被 3 个专栏收录

14 篇文章

订阅专栏

css

12 篇文章

订阅专栏

javascript

7 篇文章

订阅专栏

本文介绍如何使用JavaScript轻松交换HTML表格中的两列。通过选择目标列的索引，可以实现列的动态调整，使得在不改变表格数据源的情况下改变表格展示效果。

利用js交换table中的两列

点按钮后table的第一列和第二列内容互换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
    <style>
    button {
      margin-top: 30px;
    }
    </style>
</head>
<body>
    <table border="1" id="my-table">
        <tr>
          <td>星期天</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期天</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期天</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期天</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期天</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期天</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
      </table>
      <button id="my-button">My Button</button>
      <script>
      var btn = document.getElementById('my-button');
      var tr = document.getElementById('my-table').rows;
      btn.onclick = function() {
        for (i = 0; i < tr.length; i++) {
            tr[i].insertBefore(tr[i].cells[1], tr[i].cells[0]);
        }
      }
      </script>
</body>
</html>