Javascript 单击按钮时显示表格
在我的网页上,当单击菜单中的一个按钮时,可能会出现一个表,当单击另一个按钮时,可能会将该表替换为具有不同数据的另一个表 我尝试过不同的可能性,不知怎么的,它是有效的,但它不能取代桌子Javascript 单击按钮时显示表格,javascript,frontend,Javascript,Frontend,在我的网页上,当单击菜单中的一个按钮时,可能会出现一个表,当单击另一个按钮时,可能会将该表替换为具有不同数据的另一个表 我尝试过不同的可能性,不知怎么的,它是有效的,但它不能取代桌子 document.getElementById("table1").style.display="none"; document.getElementById(“btn1”).addEventListener(“单击”,函数(){ document.getElementById(“表1”).style.disp
document.getElementById("table1").style.display="none";
document.getElementById(“btn1”).addEventListener(“单击”,函数(){
document.getElementById(“表1”).style.display=“块”;
document.getElementById(“表2”).style.display=“无”;
});
document.getElementById(“btn2”).addEventListener(“单击”,函数)(){
document.getElementById(“表2”).style.display=“块”;
document.getElementById(“表1”).style.display=“无”;
});代码>
按钮1
按钮2
名字
姓氏
年龄
吉尔
史密斯
50
名字
姓氏
年龄
前夕
杰克逊
94
您的问题示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Appear and Disappear</title>
</head>
<body>
<nav>
<button onclick="showTable1()">showTable1</button>
<button onclick="showTable2()">showTable2</button>
</nav>
<table id='table1' style="display:none">
<tr>
<th>Table Name</th>
</tr>
<tr>
<td>
It's table1
</td>
</tr>
</table>
<table id='table2' style="display:none">
<tr>
<th>Table Name</th>
</tr>
<tr>
<td>
It's table2
</td>
</tr>
</table>
<script>
function showTable1() {
document.getElementById("table1").style.display = "block";
document.getElementById("table2").style.display = "none";
} function showTable2() {
document.getElementById("table1").style.display = "none"; document.getElementById("table2").style.display = "block";
}
</script>
</body>
</html>
出没
表1
表2
表名
是表1
表名
是表2
函数showTable1(){
document.getElementById(“表1”).style.display=“块”;
document.getElementById(“表2”).style.display=“无”;
}函数showTable2(){
document.getElementById(“表1”).style.display=“无”;document.getElementById(“表2”).style.display=“块”;
}
document.getElementById(“表1”).style.display=“无”代码>仅隐藏ID为表的元素
。没有替代品;我们需要更多的上下文。可能是重复的