html table tr

在HTML中，表格（table）是一种常见的元素，用于展示和组织数据，如果你想要实现表格的切换效果，比如点击某个按钮或链接时显示不同的表格内容，可以通过结合使用HTML、CSS和JavaScript来实现。

以下是一个详细的步骤说明，教你如何制作一个可切换的表格效果：

步骤1: HTML结构

你需要创建基本的HTML结构来包含你的表格和切换按钮。

<div class="tablecontainer">
  <button onclick="switchTable('table1')">显示表格 1</button>
  <button onclick="switchTable('table2')">显示表格 2</button>
  <table id="table1" class="activetable">
    <!表格1的内容 >
  </table>
  <table id="table2" class="hiddentable">
    <!表格2的内容 >
  </table>
</div>

在这个例子中，我们有两个按钮，每个按钮对应一个表格。table1默认是可见的（通过activetable类），而table2默认是隐藏的（通过hiddentable类）。

步骤2: CSS样式

接下来，我们需要定义一些CSS样式来控制表格的显示和隐藏。

.hiddentable {
  display: none;
}
.activetable {
  display: block;
}

这里，display: none;将使元素不可见，而display: block;将使元素显示为块级元素。

步骤3: JavaScript交互

我们需要编写JavaScript函数来处理按钮点击事件，并切换表格的可见性。

function switchTable(tableId) {
  // 获取所有表格
  var tables = document.querySelectorAll('.tablecontainer table');
  // 遍历所有表格，将它们设为隐藏
  tables.forEach(function (table) {
    table.classList.remove('activetable');
    table.classList.add('hiddentable');
  });
  // 显示被点击的表格
  var targetTable = document.getElementById(tableId);
  targetTable.classList.remove('hiddentable');
  targetTable.classList.add('activetable');
}

这个JavaScript函数首先会将所有表格隐藏，然后只显示被点击的那个表格。

归纳

现在，当用户点击不同的按钮时，相应的表格就会显示出来，其他表格则会被隐藏，从而实现了表格的切换效果。

请注意，以上代码只是一个基础示例，在实际的网站开发中，你可能需要根据具体需求对代码进行适当的调整和优化，你可能需要添加更多的样式来改善表格的外观，或者使用更复杂的逻辑来控制表格的切换。