所以目前我已经制作了 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>
SMILET
相关分类