用js控制表格的隐藏与显示

-----------------------------------------------------------
<script>  
  function   show()  
  {  
  if   (t2.style.display=="none")  
  {  
  t2.style.display=""  
  //t3.style.display="none"  
  }  
  else  
  {  
  t2.style.display="none"  
  //t3.style.display=""  
  }  
   
  }  
  </script>  
  <table   name="t1"   border="2">  
      <tr>  
          <td>  
              <form   name="form1">  
                  <input   type="radio"   οnclick="show()">显示/影藏  
              </form>  
          </td>  
      </tr>  
  </table>  
  <table   id="t2"   border="2"   style="display:none">  
      <tr>    
          <td>t2</td>  
      </tr>  
  </table>  
  <table   id="t3"   border="2">  
      <tr>    
          <td>t3</td>  
      </tr>  
  </table>  
  <table   id="t4"   border="2">  
      <tr>    
          <td>t4</td>  
      </tr>  
  </table>  
----------------------------------------------------------------------
<table   name="t1"     width="100%"   border="0"   cellspacing="0"   cellpadding="0">  
      <tr>  
          <td>  
              <form   name="form1"   method="post"   action="">  
                  <input   type="checkbox"   name="radiobutton"   value="radiobutton"   οnclick="t2.style.display=checked?'':'none'"   checked>  
                  显示/隐藏            
              </form>  
          </td>  
      </tr>  
  </table>  
  <table   id="t2"   width="100%"   border="0"   cellspacing="0"   cellpadding="0">  
      <tr>    
          <td>&nbsp;2</td>  
      </tr>  
  </table>  
  <table   name="t3"     width="100%"   border="0"   cellspacing="0"   cellpadding="0">  
      <tr>    
          <td>&nbsp;3</td>  
      </tr>  
  </table>  
  <table   name="t4"   width="100%"   border="0"   cellspacing="0"   cellpadding="0">  
      <tr>    
          <td>&nbsp;4</td>  
      </tr>  
  </table>  
-----------------------------------------------------------------------
<table   name="t1"     width="100%"   border="0"   cellspacing="0"   cellpadding="0">  
      <tr>  
          <td>  
              <form   name="form1"   method="post"   action="">  
                  <input   type="checkbox"   name="radiobutton"   value="radiobutton"   οnclick="t2.style.display=checked?'':'none';t3.style.display=checked?'none':''">  
                  显示/隐藏                
              </form>  
          </td>  
      </tr>  
  </table>  
  <table   id="t2"   width="100%"   border="0"   cellspacing="0"   cellpadding="0"   style="display:none">  
      <tr>    
          <td>&nbsp;2</td>  
      </tr>  
  </table>  
  <table   id="t3"     width="100%"   border="0"   cellspacing="0"   cellpadding="0">  
      <tr>    
          <td>&nbsp;3</td>  
      </tr>  
  </table>  
  <table   name="t4"   width="100%"   border="0"   cellspacing="0"   cellpadding="0">  
      <tr>    
          <td>&nbsp;4</td>  
      </tr>  
  </table>
---------------------------------------------------------------------------
<table id="sbr">
<tr>
<td>sdaf</td>
</tr>
<table>
<input name=button1 type=button value="按" οnclick=show()>
<script language=javascript>
function show()
{
var obj=document.getElementById("sbr")
obj.style.display=(obj.style.display=="")?"none":""
}
</script>
----------------------------------------------------------------------
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用JavaScript控制表格列的显示隐藏时,可以通过以下步骤来实现。 首先,我们需要给表格添加一个唯一的标识,这样我们才能准确地找到需要操作的表格。例如,我们可以给表格添加一个id属性: ```html <table id="myTable"> ... </table> ``` 接下来,我们可以通过获取表格对象并使用JavaScript的style.display属性来控制列的显示隐藏。假设我们要控制第二列的显示隐藏。 ```javascript // 获取表格对象 var table = document.getElementById("myTable"); // 获取表格中的所有行 var rows = table.getElementsByTagName("tr"); // 遍历每一行 for (var i = 0; i < rows.length; i++) { // 获取当前行的所有单元格 var cells = rows[i].getElementsByTagName("td"); // 获取第二列单元格 var cell = cells[1]; // 判断列是否隐藏,通过设置display属性来控制显示隐藏 if (cell.style.display === "none") { cell.style.display = ""; } else { cell.style.display = "none"; } } ``` 上述代码中,我们首先获取了表格对象和所有行的集合。然后,通过循环遍历每一行,再获取每一行的所有单元格。接下来,我们可以通过获取到的单元格对象来控制列的显示隐藏。 对于需要显示的列,我们将其样式中的display属性设为空字符串即可,而对于需要隐藏的列,我们将其样式中的display属性设为"none"。这样就可以实现通过JavaScript控制表格列的显示隐藏了。 需要注意的是,以上代码只是一个示例,实际使用时应根据具体情况进行相应的修改和适应。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值