style.display问题

最新推荐文章于 2024-07-29 13:45:08 发布

kemy88

最新推荐文章于 2024-07-29 13:45:08 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript div function 正则表达式 table input

本文链接：https://blog.youkuaiyun.com/kemy88/article/details/1522618

javascript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用JavaScript控制表格中特定列显示与隐藏的例子。通过点击链接或勾选复选框触发事件，利用JavaScript动态更改元素的display属性实现效果。演示了如何使用indexOf()和正则表达式来匹配元素ID。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

style.display的属性在这我就不多说了。。

用得最多的无非是

隐藏:none

显示:block(表示块级)或者是style.display=''

以下主要是介绍我在使用中遇到的问题

我想实现的效果是利用某个事件来控一个表格的一列隐藏与显示

第一段是错误的代码：原因是div的style.display是块级别的.它和<td>的位置放得不当

<xmp>

<a href="#" onclick="javascript:f_show('1');" />show1</a>
<table>
<tr><th>aa</th><th>bb</th></tr>
<tr>
<div id="node_1_1"><td>a1</td></div>
<div id="child_1" ><td>b1</td></div>
</tr>
<tr>
<div id="node_1_2"><td>a2</td></div>
<div id="child_2" ><td>b2</td></div>
</tr>
</table>
<script language="javascript">
function f_show(num){
switch(num){
case '1':
var o=document.getElementsByTagName("div");
for(var i=0;i<o.length;i++){
  var theid=o[i].id;
  if(theid.indexOf("node_1")!=-1){
   document.getElementById(theid).style.display='none';
  }
}
// break;
}
}
</script>

</xmp>

以下是经过修改的代码

<xmp>

<a href="#" onclick="javascript:f_show('1');" />show1</a>
<table>
<tr><th><div id="node_1_0">aa</div></th><th>bb</th></tr>
<tr>
<td><div id="node_1_1">a1</div></td>
<td><div id="child_1" >b1</div></td>
</tr>
<tr>
<td><div id="node_1_2">a2</div></td>
<td><div id="child_2" >b2</div></td>
</tr>
</table>
<script language="javascript">
function f_show(num){
switch(num){
case '1':
var o=document.getElementsByTagName("div");
for(var i=0;i<o.length;i++){
  var theid=o[i].id;
  if(theid.indexOf("node_1")!=-1){
      if(document.getElementById(theid).style.display=='none'){
   document.getElementById(theid).style.display='block';
      }
      else{
   document.getElementById(theid).style.display='none';
     }
  }
}
break;
}
}
</script>

</xmp>

后来又加了一种类似的实现

<xmp>

<input type="checkbox" name="chknn" id="chkid" onclick="javascript:f_checkbox();" /> checkbox

<table>
<tr><th><div id="node_1_0">aa</div></th><th><div id="child_1_0">bb</div></th></tr>
<tr>
<td><div id="node_1_1">a1</div></td>
<td><div id="child_1_1" >b1</div></td>
</tr>
<tr>
<td><div id="node_1_2">a2</div></td>
<td><div id="child_1_2" >b2</div></td>
</tr>
</table>
<script language="javascript">
function f_show(num){
switch(num){
case '1':
var o=document.getElementsByTagName("div");
for(var i=0;i<o.length;i++){
  var theid=o[i].id;
  var reg=/^node_1/g;
  if(reg.test(theid)){
      if(document.getElementById(theid).style.display=='none'){
   document.getElementById(theid).style.display='block';
      }
      else{
   document.getElementById(theid).style.display='none';
     }
  }
}
break;
}
}
function f_checkbox(){
   // var obj=document.form.chknn;
    var obj=document.getElementById('chkid');
    var o=document.getElementsByTagName('div');

         for(var i=0;i<o.length;i++){
  var theid=o[i].id;
  var reg=/^child_1/g;
  if(reg.test(theid)){
                     if(obj.checked==true){
                 document.getElementById(theid).style.display='block';
                     }
              else{
                 document.getElementById(theid).style.display='none';
              }
  }
}
    }
</script>