html显示隐藏内容点击显示数据表代码,js如何实现点击显示和隐藏表格

可以使用以下代码实现点击显示和隐藏表格：

HTML代码：

<button id="toggle-table">显示/隐藏表格</button>
<table id="my-table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </tbody>
</table>

JavaScript代码：

// 获取按钮和表格元素
const toggleBtn = document.getElementById("toggle-table");
const table = document.getElementById("my-table");

// 初始状态为隐藏
let isTableVisible = false;

// 点击按钮时切换表格的可见性
toggleBtn.addEventListener("click", () => {
  if (isTableVisible) {
    table.style.display = "none";
    isTableVisible = false;
  } else {
    table.style.display = "table";
    isTableVisible = true;
  }
});

以上代码中，我们首先获取了按钮和表格元素，然后定义了一个变量 `isTableVisible` 来记录表格的可见性状态。当按钮被点击时，我们检查当前表格的可见性状态，如果表格是可见的，则将其隐藏，同时将 `isTableVisible` 设置为 `false`，否则将其显示，并将 `isTableVisible` 设置为 `true`。这样就可以实现点击显示和隐藏表格的功能。