js控制表格显示隐藏

在JavaScript中控制表格的显示和隐藏，通常涉及到对DOM元素的操作。以下是一些基础概念和相关方法：

基础概念

DOM（文档对象模型）：DOM是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
CSS Display属性：通过修改元素的display属性，可以控制元素的显示或隐藏。常见的值有block、none等。

类型与应用场景

基于条件的显示/隐藏：根据某些条件（如用户输入、数据状态等）来决定是否显示表格。
交互式界面：在复杂的用户界面中，通过点击不同的标签或按钮来切换显示不同的表格。

示例代码

以下是一个简单的示例，展示如何使用JavaScript来控制表格的显示和隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制表格显示隐藏</title>
<style>
  #myTable {
    width: 100%;
    border-collapse: collapse;
  }
  #myTable td, #myTable th {
    border: 1px solid black;
    padding: 8px;
  }
</style>
</head>
<body>

<button onclick="toggleTable()">切换表格显示</button>

<table id="myTable" style="display: none;">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>34</td>
  </tr>
</table>

<script>
function toggleTable() {
  var table = document.getElementById("myTable");
  if (table.style.display === "none") {
    table.style.display = "block";
  } else {
    table.style.display = "none";
  }
}
</script>

</body>
</html>