相关关键词
关于我们
最新文章
HTML 隐藏与显示Table中的指定的TR行,非IE内核的浏览器也可正常使用
发布日期:2014-02-21 00:00:00
382
HTML 隐藏与显示Table中的指定的TR行,非IE内核的浏览器也可正常使用
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>HTML 隐藏与显示Table中的指定的TR行,非IE内核的浏览器也可正常使用</title>
</head>
<body>
<input type="button" value="隐藏第1行" onclick="document.getElementById('tr1').style.display='none';"/>
<input type="button" value="隐藏第2行" onclick="document.getElementById('tr2').style.display='none';"/>
<input type="button" value="隐藏第3行" onclick="document.getElementById('tr3').style.display='none';"/><br/>
<!-- 显示时不能使用“block”,否则非IE内核的浏览器显示不正常 -->
<input type="button" value="显示第1行" onclick="document.getElementById('tr1').style.display='';"/>
<input type="button" value="显示第2行" onclick="document.getElementById('tr2').style.display='';"/>
<input type="button" value="显示第3行" onclick="document.getElementById('tr3').style.display='';"/>
<table width="600" border="1">
<tr>
<th width="100">序号</th>
<th width="200">姓名</th>
<th width="300">住址</th>
</tr>
<tr id="tr1">
<td>1001</td>
<td>张三</td>
<td>广东珠海</td>
</tr>
<tr id="tr2">
<td>1002</td>
<td>李四</td>
<td>广东广州</td>
</tr>
<tr id="tr3">
<td>1003</td>
<td>王五</td>
<td>湖南长沙</td>
</tr>
</table>
</body>
</html>