js 怎么隐藏td

在 JavaScript 中隐藏 td（表格单元格）可以通过多种方式实现，以下介绍几种常见的方法：

一、修改元素的 CSS 样式 - display 属性

可以通过设置 td 元素的 display 样式属性为 none 来隐藏它。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐藏 TD 示例</title>
  <style>
    table {
      border-collapse: collapse;
      width: 50%;
    }

    td {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>

<body>
  <table id="myTable">
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
  </table>
  <button onclick="hideTd()">隐藏第二个单元格</button>

  <script>
    function hideTd() {
      var table = document.getElementById('myTable');
      var tds = table.getElementsByTagName('td');
      if (tds.length > 1) {
        tds[1].style.display = 'none';
      }
    }
  </script>
</body>

</html>

在上述代码中，当点击按钮时，hideTd 函数会被调用，它会获取表格中的所有 td 元素，然后将第二个 td（索引为 1）的 display 属性设置为 none，从而隐藏该单元格。

二、修改元素的 CSS 样式 - visibility 属性

将 visibility 属性设置为 hidden 也可以达到隐藏的效果，但与 display: none 不同的是，设置为 visibility: hidden 的元素仍然占据空间。

示例代码：

function hideTdVisibility() {
  var table = document.getElementById('myTable');
  var tds = table.getElementsByTagName('td');
  if (tds.length > 1) {
    tds[1].style.visibility = 'hidden';
  }
}

三、使用类名控制（推荐用于更复杂的场景）

定义一个 CSS 类用于隐藏元素，在 JavaScript 中给目标 td 添加这个类。

CSS 部分：

.hidden {
  display: none;
}

JavaScript 部分：

function hideTdWithClass() {
  var table = document.getElementById('myTable');
  var tds = table.getElementsByTagName('td');
  if (tds.length > 1) {
    tds[1].classList.add('hidden');
  }
}

应用场景：