Question

我正在尝试让两个按钮使用javascript在2个表之间切换，但是每当我进行测试时，两个表都会出现，而不仅仅是一个表

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var btnTab1 = document.getElementById("showTable1");
var btnTab2 = document.getElementById("showTable2");

btnTab1.onclick = function() {
  table1.style.display = "table";
  table2.style.display = "none";
}

btnTab2.onclick = function() {
  table1.style.display = "none";
  table2.style.display = "table";
}

<table id=table1>
<table id=table2>

<input type="button" id="showTable1" value="Table 1">
<input type="button" id="showTable2" value="Table 2">

我希望一次显示1张表，并在它们之间进行切换，但是相反，它们都同时显示，并且按钮什么也没做

Answer 1

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var btnTab1 = document.getElementById("showTable1");
var btnTab2 = document.getElementById("showTable2");

btnTab1.onclick = function() {
  table1.style.display = "table";
  table2.style.display = "none";
}

btnTab2.onclick = function() {
  table1.style.display = "none";
  table2.style.display = "table";
}

#table2 {
  display: none;
}

<table id="table1">
  <tr>
    <td>Table1</td>
  </tr>
</table>
<table id="table2">
  <tr>
    <td>Table2</td>
  </tr>
</table>

<input type="button" id="showTable1" value="Table 1">
<input type="button" id="showTable2" value="Table 2">

Answer 2

您的代码正确，但是您只是忘记了初始化表上的显示并关闭表标签：（我添加了一些内容，所以我们看到了可见的表）

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var btnTab1 = document.getElementById("showTable1");
var btnTab2 = document.getElementById("showTable2");

btnTab1.onclick = function() {
  table1.style.display = "table";
  table2.style.display = "none";
}

btnTab2.onclick = function() {
  table1.style.display = "none";
  table2.style.display = "table";
}

<table id=table1 style="display: table">
  <thead>
    <tr>
      <th colspan="2">The table header 1</th>
    </tr>
  </thead>
</table>
<table id=table2 style="display: none">
  <thead>
    <tr>
      <th colspan="2">The table header 2</th>
    </tr>
  </thead>
</table>

<input type="button" id="showTable1" value="Table 1">
<input type="button" id="showTable2" value="Table 2">

Answer 3

我要用div替换您的表，因为这样可以更轻松地显示代码背后的思想。

您可以将侦听器直接添加到按钮上，这样可以更轻松地发送参数。我做了一些动态处理，可以轻松添加任意数量的表，而无需更改代码。您需要做的就是将按钮中showTable('table2')中的参数更改为showTable('table3')。

此解决方案将不需要那么多的变量，并且不依赖于页面是否已加载。就像@brianfit所说的那样，您可能在head元素中包含了javascript代码，这意味着在代码运行时该文档不存在，因此您无法在页面上找到任何元素。

我还认为，最好使用类为元素设置样式，而不是更改代码中的样式。语义看起来更好，并且IMHO可以更好地理解为什么隐藏了某些表。

function showTable(tableIdToShow) {
  hideAllTables();
  
  let tableElement = document.getElementById(tableIdToShow);

  tableElement.classList.add('show');
}

function hideAllTables() {
  let allTableElements = document.querySelectorAll('.table');

  for (tableElement of allTableElements) {
    tableElement.classList.remove('show')
  }
}

.table {
  display: none;
}

.table.show {
  display: block;
}

<div id="table1" class="show table">TABLE 1</div>
<div id="table2" class="table">TABLE 2</div>

<input type="button" onclick="showTable('table1')" value="Table 1">
<input type="button" onclick="showTable('table2')" value="Table 2">

Answer 4

您的脚本正确且正在运行。问题出在<table>。它是空的，没有关闭。因此，您无法注意到表显示中的更改。尝试以下示例。

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var btnTab1 = document.getElementById("showTable1");
var btnTab2 = document.getElementById("showTable2");

btnTab1.onclick = function () {
  table1.style.display = "block";
  table2.style.display = "none";
}
btnTab2.onclick = function () {
  table1.style.display = "none";
  table2.style.display = "block";
}

<table id=table1>
  <tr>
    <td>table 01</td>
  </tr>
</table>
<table id=table2>
  <tr>
    <td>table 02</td>
  </tr>
</table>

<input type="button" id="showTable1" value="Table 1">
<input type="button" id="showTable2" value="Table 2">

Answer 5

如果您的代码块位于标题中，请尝试将其向下移动到闭体标记之前。我只是以两种方式运行它，它在标题中不起作用，而在正文中却起作用。

原因：脚本已加载到html之前的标头中，因此getelementbyid调用返回null。通过将脚本放在html后面，div会填充ID，脚本会正确加载该ID。

如果您在Chrome中加载文件并打开Javascript控制台，则会看到类似于以下内容的错误消息：

(index):12 Uncaught TypeError: Cannot set property 'onclick' of null
at (index):12

需要帮助在javascript中的表之间切换

5 个答案: