数据表动态隐藏列 - Javascript (1)

📌 相关文章

📜 数据表动态隐藏列 - Javascript (1)

📅 最后修改于: 2023-12-03 14:54:57.674000 🧑 作者: Mango

数据表动态隐藏列 - Javascript

简介

在数据表格中，有时候需要根据用户的需求动态显示或隐藏某些列。本文将介绍如何使用JavaScript实现数据表的动态隐藏列功能。

步骤

1. HTML结构

首先，我们需要在HTML中创建一个数据表格，并指定HTML id。

<table id="myTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
      <td>B4</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
      <td>C4</td>
    </tr>
  </tbody>
</table>

2. 创建复选框

接下来，创建对应的复选框，用于动态显示或隐藏数据表格的列。

<label><input type="checkbox" id="chk1" checked>列1</label>
<label><input type="checkbox" id="chk2" checked>列2</label>
<label><input type="checkbox" id="chk3" checked>列3</label>
<label><input type="checkbox" id="chk4" checked>列4</label>

3. 创建JS函数

下一步，我们需要创建JavaScript函数，用于动态显示或隐藏数据表格的列。

function hideColumn(colIndex, hide) {
  // 获取表格对象
  var table = document.getElementById("myTable");
  
  // 隐藏/显示列
  var style = hide ? "none" : "";
  for (var i = 0, row; row = table.rows[i]; i++) {
    row.cells[colIndex].style.display = style;
  }
}

4. 绑定复选框事件

最后，我们需要将复选框与对应的列绑定事件，当复选框选中或取消选中时，显示或隐藏对应的列。

var chk1 = document.getElementById("chk1");
var chk2 = document.getElementById("chk2");
var chk3 = document.getElementById("chk3");
var chk4 = document.getElementById("chk4");

chk1.addEventListener("change", function() {
  hideColumn(0, !this.checked);
});

chk2.addEventListener("change", function() {
  hideColumn(1, !this.checked);
});

chk3.addEventListener("change", function() {
  hideColumn(2, !this.checked);
});

chk4.addEventListener("change", function() {
  hideColumn(3, !this.checked);
});

示例

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态隐藏列</title>
  <style>
    #myTable {
      border: 1px solid #ddd;
      border-collapse: collapse;
    }
    #myTable td, #myTable th {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>
  <label><input type="checkbox" id="chk1" checked>列1</label>
  <label><input type="checkbox" id="chk2" checked>列2</label>
  <label><input type="checkbox" id="chk3" checked>列3</label>
  <label><input type="checkbox" id="chk4" checked>列4</label>

  <table id="myTable">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
      </tr>
      <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td>B4</td>
      </tr>
      <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
        <td>C4</td>
      </tr>
    </tbody>
  </table>

  <script>
    function hideColumn(colIndex, hide) {
      // 获取表格对象
      var table = document.getElementById("myTable");

      // 隐藏/显示列
      var style = hide ? "none" : "";
      for (var i = 0, row; row = table.rows[i]; i++) {
        row.cells[colIndex].style.display = style;
      }
    }

    var chk1 = document.getElementById("chk1");
    var chk2 = document.getElementById("chk2");
    var chk3 = document.getElementById("chk3");
    var chk4 = document.getElementById("chk4");

    chk1.addEventListener("change", function() {
      hideColumn(0, !this.checked);
    });

    chk2.addEventListener("change", function() {
      hideColumn(1, !this.checked);
    });

    chk3.addEventListener("change", function() {
      hideColumn(2, !this.checked);
    });

    chk4.addEventListener("change", function() {
      hideColumn(3, !this.checked);
    });
  </script>
</body>
</html>

总结

本文介绍了如何使用JavaScript实现数据表的动态隐藏列功能，通过绑定复选框事件、显示或隐藏表格列，实现了在用户交互下动态显示或隐藏列的效果。