使用按钮切换表格
所以目前我已经制作了 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>
三国纷争3回答
-
SMILET
使用单个选择。并给你想要隐藏的表隐藏的属性并使用下面给出的javascript function myFunction() { var tables = document.getElementsByClassName("toggletable"); var targetval = document.getElementById("select").value; for(var i = 0; i < tables.length; i++){ if(targetval == i + 1){ tables[i].removeAttribute("hidden"); }else{ tables[i].setAttribute("hidden", true); } } }<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>#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;}</style></head><body><select id="select" onchange="myFunction()"> <option value="1" >Table 1</option> <option value="2">Table 2</option> <option value="3">Table 3</option> <option value="4">Table 4</option> <option value="5">Table 5</option></select><div id="Tables" class="toggletable"><table> <tr> <th>Cost</th> <th>Name</th> <th>Country</th> </tr> <tr> <td>Price1</td> <td>Names1</td> <td>Place1</td> </tr></table></div><div id="Tables1" class="toggletable" hidden><table> <tr> <th>Cost</th> <th>Name</th> <th>Country</th> </tr> <tr> <td>Price2</td> <td>Names2</td> <td>Place2</td> </tr></table></div><div class="toggletable" hidden><table> <tr> <th>Cost</th> <th>Name</th> <th>Country</th> </tr> <tr> <td>Price3</td> <td>Names3</td> <td>Place3</td> </tr></table></div><div class="toggletable" hidden><table> <tr> <th>Cost</th> <th>Name</th> <th>Country</th> </tr> <tr> <td>Price4</td> <td>Names4</td> <td>Place4</td> </tr></table></div><div class="toggletable" hidden><table> <tr> <th>Cost</th> <th>Name</th> <th>Country</th> </tr> <tr> <td>Price5</td> <td>Names5</td> <td>Place5</td> </tr></table></div><script>function myFunction() { var tables = document.getElementsByClassName("toggletable"); var targetval = document.getElementById("select").value; for(var i = 0; i < tables.length; i++){ if(targetval == i + 1){ tables[i].removeAttribute("hidden"); }else{ tables[i].setAttribute("hidden", true); } }}</script></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript