网站用JavaScript隐藏或显示表格列

作者:微赢天下 来源:微赢天下网络科技有限公司www.v678.net 时间:2019-09-18
网站设计中用JavaScript隐藏或显示表格列

网站用JavaScript隐藏或显示表格列

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>网站建设|表格技术</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>

网站建设|表格技术代码分享完毕

声明:本站除转发政府类文章外,其余文章均为原创,未经准许不得转载!