我的 HTML 文档中有大约 17 个表格，当我通过单独的按钮单击它们时希望它们单独出现 [关闭]

Question

我的 HTML 文档中有 17 个表格。我希望它们都在一个单独的按钮下。所以 2000 年的表格下面有一个按钮，上面写着： 2000 年的表格在下面！我可以做第一个。但是，当我尝试将 JavaScript 代码应用于其他表格上的按钮时，我不断得到第一个表格。

这是我的 JavaScript 代码：

<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}
} 
</script>

这是我的表格 HTML 代码，我只显示前 2 个表格，因为它是 17 次复制粘贴：

<!--Table for the year 2000 below-->
<button onclick="myFunction()">Table for the year 2000 below!</button>
<div id="myDIV" style="display:none;">
+<table>...
</table>
<br><br><br>
</div>

<!--Table for the year 2001 below-->
<button onclick="myFunction()">Table for the year 2001 below!</button>
<div id="myDIV" style="display:none;">
+<table>...
</table>
<br><br><br>
</div>

好的，听我说完，我现在用谷歌快速搜索getElementById 只能保存一个参数。我明白了。我试图复制我的 JS 代码并更改函数中的 ID 和 HTML 代码，但每次我尝试只能显示我应用该方法的最新表，无论我按下哪个按钮。

我还看到这个论坛上的人使用querySelectorAll，但这对我来说并不奏效。

有人可以帮我解决这个问题吗？我希望我的方法能够工作，使用与第一个表相同的函数，但不断更改 ID。但显然没有。

Answer 1

输入很少：

1. Id 对元素应该是唯一的
2. 应该为事件处理程序提供一些输入来标识它必须使用的元素（在本例中为table）。

为了涵盖所有这些，我们提供了一个示例 sn-p 以进一步帮助您。

详细分类：

1. 我们将click 事件处理程序附加到所有button 元素
2. 我们尝试使用document.querySelectorAll 识别所有按钮元素
3. 我们如何确定在click 事件中显示哪个table？我们可以将额外的细节放在data-* 属性中。基于此，我们使用document.getElementById 选择该特定表

代码库中包含的详细 cmets。

window.onload = function() {

  // Get all the `button` elements
  var buttons = document.querySelectorAll("button");
  // To store the current `table` 
  var currentTable = null;

  // Loop over each button element and attach an handler to `click` event
  buttons.forEach((element, index, array) => {

    element.addEventListener("click", function() {

      // Get the associated table using the `data-table` attribute of this button
      var tableId = element.getAttribute("data-table");

      // Good to go? 
      if (tableId) {

        //  Hide the current `table` if we have any displayed
        if (currentTable !== null) {
          currentTable.style.display = "none";
        }

        // Store the current table and `display` it
        currentTable = document.getElementById(tableId);
        currentTable.style.display = "table";
      }

    });

  });
}

table {
  display: none;
}

#table1 {
  border: 1px solid red;
}

#table2 {
  border: 1px solid blue;
}

<button id="btnForTable1" data-table="table1">Show Table 1</button>
<button id="btnForTable2" data-table="table2">Show Table 2</button>
<!-- Table 1 -->
<table id="table1">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>
<!-- Table 2 -->
<table id="table2">
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>