2012-10-31 来源:网络
【实例名称】
用JavaScript隐藏或显示表格列
【实例描述】
本例学习如何动态隐藏表格中的某一列,但并不是先删除再添加,而是使用列“display”属性。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> </head> <body> <table border=1 cellpadding=0 cellspacing=0 width="80%"> <tr> <td>第一列 </td> <td>第二列 </td> <td>第三列 </td> <td>第四列 </td> </tr> <tr> <td>第一列 </td> <td>第二列 </td> <td>第三列 </td> <td>第四列 </td> </tr> </table> <input type=button value==隐藏第三列 onclick=hide()> <input type=button value==显示第三列 onclick=show()> <script language=javascript> function hide() { var tr=document.getElementsByTagName('tr'); //获取所有的行 var i; for(i=0;i<tr.length;i++) //遍历每一列 { tr[i].getElementsByTagName('td')[2].style.display='none';//隐藏第三列 } } function show() { var tr=document.getElementsByTagName('tr'); //获取所有的行 var i; for(i=0;i<tr.length;i++) //遍历每一列 { tr[i].getElementsByTagName('td')[2].style.display='block';//隐藏第三列 } } </script> </body> </html>
【运行效果】
初始运行效果
隐藏第三列后的效果
【难点剖析】
本例的重点有两个:如何获取指定的表格列,以及如何设置列隐藏二获取指定的列式通过遍历行的方法,使用“for”语句遍历表格中所有的行。设置列隐藏.则使用列的“display”属性,将其设置为“none’’便不再显示此列,如果设置为“block”则会从新显示。
【源码下载】
如果你不愿复制代码及提高代码准确性,你可以点击:用JavaScript隐藏或显示表格列 进行本实例源码下载