使用按钮切换表格

Question

因此，目前我已经制作了2张包含信息的表格。但是我想这样做，以便当用户打开html文档时它只显示1个表，并且您可以在不同的表之间切换。当我单击表1的按钮时，它隐藏了表2，而当我单击表2的按钮时，它隐藏了表1。

function myFunction() {
  var x = document.getElementById("Tables");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function myFunction1() {
  var x = document.getElementById("Tables1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#Tables {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: blue;
  margin-top: 20px;
}

#Tables1 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: Purple;
  margin-top: 20px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<button onclick="myFunction()">Click!</button> <button onclick="myFunction1()">Click!</button>

<div id="Tables">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div id="Tables1">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

Answer 1

干得好。这是非常简单且非常干净的方法。

注意：这是一个通用函数，可用于很多事物在两个事物之间切换。

function toggleElements(showElement, hideElement) {
  document.getElementById(showElement).style.display = "block";
  document.getElementById(hideElement).style.display = "none";
}

#Tables {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: blue;
  margin-top: 20px;
}
#Tables1 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: Purple;
  margin-top: 20px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<button onclick="toggleElements('Tables', 'Tables1')">Click</button> 
<button onclick="toggleElements('Tables1', 'Tables')">Click</button>

<div id="Tables">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div id="Tables1" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

对于多个表切换，请使用以下代码：

function toggleElements(showElement, hideElements) {
  document.querySelectorAll(hideElements).forEach(el => el.style.display = "none");
  document.querySelector(showElement).style.display = "block";
}

.table {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  margin-top: 20px;
}

.table1 {
    background-color: blue;
}

.table2 {
  background-color: Purple;
}

.table3 {
  background-color: green;
}

.table4 {
  background-color: violet;
}

.table5 {
  background-color: pink;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<button onclick="toggleElements('.table1', '.table')">Table 1</button> 
<button onclick="toggleElements('.table2', '.table')">Table 2</button>
<button onclick="toggleElements('.table3', '.table')">Table 3</button>
<button onclick="toggleElements('.table4', '.table')">Table 4</button>
<button onclick="toggleElements('.table5', '.table')">Table 5</button>

<div class="table table1">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div class="table table2" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div class="table table3" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div class="table table4" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div class="table table5" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>