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>
<a href="#" onclick="javascript:f_show('1');" />show1</a>
<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>
</xmp>
这上面又用了两种不同的方式：
就在处理得到页面上所有div,判断是否是以node_1_开头。一种是利用indexof();另一种是用正则表达式
var reg=/^node_1/g;
if(reg.test(xxx)){
}