News新闻

业界新闻动态、技术前沿
Who are we?

您的位置:首页      DIV+CSS      HTML 隐藏与显示Table中的指定的TR行,非IE内核的浏览器也可正常使用

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>