js设置table列得隐藏与显示

在JavaScript中，可以通过操作CSS来控制table列的隐藏和显示。以下是一个简单的示例代码，展示了如何基于按钮点击事件来切换列的显示状态：

HTML部分：

<table id="myTable">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <!-- 更多行... -->
</table>
<button onclick="toggleColumnVisibility(1)">切换列2显示</button>

JavaScript部分：

function toggleColumnVisibility(columnIndex) {
  var table = document.getElementById('myTable');
  var rows = table.getElementsByTagName('tr');
  
  for (var i = 1, row; row = rows[i]; i++) {
    // 获取指定列的单元格
    var cell = row.getElementsByTagName('td')[columnIndex - 1];
    if (cell) {
      // 切换该单元格的显示状态
      cell.style.display = cell.style.display === 'none' ? '' : 'none';
    }
  }
}

在这个例子中，我们定义了一个名为toggleColumnVisibility的函数，它接受一个参数columnIndex，表示要切换显示状态的列的索引（从0开始计数）。函数内部遍历表格的所有行，获取指定索引的单元格，并根据其当前的显示状态切换它的display属性。当display设置为none时，列被隐藏；设置为空字符串时，列被显示。