用javascript怎么隐藏和现实整个表格?
发布网友
发布时间：2022-04-30 14:17
共1个回答
热心网友
时间：2022-04-24 13:01
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid black;
border-collapse: collapse;
display: none;
position: relative;
top: 30px;
}
th,td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
var ind = -1;
onload = function() {
var tables = document.getElementsByTagName("table");
tables[0].style.display = 'block';
ind = 0;
var as = document.getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
as[i].index = i;
as[i].onclick = function() {
tables[ind].style.display = 'none';
tables[this.index].style.display = 'block';
ind = this.index;
}
}
}
</script>
</head>
<body>
<div>
<!--navigation_bar-->
<div>
<ul>
<li><a href="###">首页</a>
</li>
<li><a href="###">电梯配件</a>
</li>
<li><a href="###">故障预测</a>
</li>
<li><a href="###">整梯装配</a>
</li>
<li><a href="###">电梯保养</a>
</li>
<li><a href="###">我的电梯</a>
</li>
</ul>
</div>
<!--首页-->
<table>
<tr>
<th>0000</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--电梯配件-->
<table>
<tr>
<th>1111</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--故障预测-->
<table>
<tr>
<th>2222</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--整梯装配-->
<table>
<tr>
<th>3333</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--电梯保养-->
<table>
<tr>
<th>4444</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</table>
<!--我的电梯-->
<table>
<tr>
<th>5555</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</div>
</body>
</html>
追问感谢您回答！请问我的getelementbyid为什么不行呢？您能帮我稍稍解释一下您的代码吗？我初学不太明白感激不尽！
追答
要解释的太多了，都在附件里，我从菜鸟到知道只花了一个礼拜的时间，网上也有下载，如果你有的话，就多看看啊，没有就下载啊
