用JS实现树无刷新的全部展开/关闭

<html><HEAD><TITLE>全国地区树形列表</TITLE>
<META http-equiv=Content-Type content="text/html; charset=GB2312">
<style>
td{font-size:12px}
div{font-family:宋体}
div.tree_add{background:url(treeline_2.gif) no-repeat left;padding-left:24px;padding-top:3px;color:blue;cursor:hand}
div.tree_1{background:url(ico_top1.gif) no-repeat left middle;padding-top:3px;font-size:15px;padding-left:20px;cursor:hand;color:blue}
div.tree_2{padding-left:100px;background:url(treeline_1.gif) 100px repeat-y;font-size:14px}
div.tree_3{background:url(treeline_2.gif) no-repeat left;padding-left:24px;padding-top:3px}
</style>
<script>
<!--function showtree(str)//展开|关闭子分支
{var eval2=str+"_value.style.display="+str+"_value.style.display=='none'?'':'none'";eval(eval2);
}
-->
</script>
</HEAD>
<BODY style="MARGIN: 0px">
<table>
<tr>
<td width=80% style="padding:30px">
<div class=tree_1 onClick="showtree('directly1')">直辖市 </div>
<div id=directly1_value class=tree_2 style="display:none">
<div class=tree_3>北京（京）</div>
<div class=tree_3>上海（沪）</div>
<div class=tree_3>天津（津）</div>
<div class=tree_3>重庆（渝）</div>
</div>
<br><br>
<div class=tree_1 onClick="showtree('directly2')">省 市 </div>
<div id=directly2_value class=tree_2 style="display:none">
<div class=tree_3>北京（京）</div>
<div class=tree_3>上海（沪）</div>
<div class=tree_3>天津（津）</div>
<div class=tree_3>重庆（渝）</div>
</div>
<br><br>
........
........这段代码 我想加一个 ‘打开所有/关闭所有’ 的单击事件  js代码怎么写  当然div  id 是自动累加的  如 directly0_value  directly1_value directly2_value 等
onClick="showtree('directly0')"  也是累加的  onClick="showtree('directly0')"  onClick="showtree('directly1')">  onClick="showtree('directly2')"  
谢谢各位哥哥 姐姐了  急用 在线等

解决方案 »

  1.   

    table加个ID
    然后拿到Table直接table.getElementsByTagName("div")
    拿到div的列表
    做个循环.全部打开隐藏
      

  2.   

    fuction opencloseall()
    {
            var all = table.getElementsByTagName("div");
            for (i = 0; i <= all.length; i++)
            {
                  ..........  
            }
    }
    是这样吗，for中怎么写啊
      

  3.   


    <html> <HEAD> <TITLE>全国地区树形列表 </TITLE> 
    <META http-equiv=Content-Type content="text/html; charset=GB2312"> 
    <style> 
    td{font-size:12px} 
    div{font-family:宋体} 
    div.tree_add{background:url(treeline_2.gif) no-repeat left;padding-left:24px;padding-top:3px;color:blue;cursor:hand} 
    div.tree_1{background:url(ico_top1.gif) no-repeat left middle;padding-top:3px;font-size:15px;padding-left:20px;cursor:hand;color:blue} 
    div.tree_2{padding-left:100px;background:url(treeline_1.gif) 100px repeat-y;font-size:14px} 
    div.tree_3{background:url(treeline_2.gif) no-repeat left;padding-left:24px;padding-top:3px} 
    </style> 
    <script> 
    function showtree(str)//展开|关闭子分支 
    { 
    var eval2=str+"_value.style.display="+str+"_value.style.display=='none'?'':'none'"; 
    eval(eval2); 
    } 
    var str="directly1";
    var test=function(){
    try{
    if(document.getElementById(str+"_value").style.display=="none")
    {
    document.getElementById(str+"_value").style.display="block";
    }else{
    document.getElementById(str+"_value").style.display="none";
    }
    var c= parseInt(str.substring(8,9))+1;
    str=str.substring(0,8)+c;
    if(typeof(document.getElementById(str+"_value"))=="object")
    {
    test();
    }
    }catch(err)
    {
    str="directly1";
    }
    };
    </script> 
    </HEAD> 
    <BODY style="MARGIN: 0px"> 
    <table> 
    <tr> 
    <td width=80% style="padding:30px"> 
    <div class=tree_1 onClick="showtree('directly1')">直辖市 </div> 
    <div id=directly1_value class=tree_2 style="display:none"> 
    <div class=tree_3>北京（京） </div> 
    <div class=tree_3>上海（沪） </div> 
    <div class=tree_3>天津（津） </div> 
    <div class=tree_3>重庆（渝） </div> 
    </div> 
    <br> <br> 
    <div class=tree_1 onClick="showtree('directly2')">省 市 </div> 
    <div id=directly2_value class=tree_2 style="display:none"> 
    <div class=tree_3>北京（京） </div> 
    <div class=tree_3>上海（沪） </div> 
    <div class=tree_3>天津（津） </div> 
    <div class=tree_3>重庆（渝） </div> 
    </div> 
    <br> <br> 
    ........ 
    ........ 
    <input type="button" onclick="test()" value="test"/>
    </html>
      

  4.   

    例如你设TABLE的ID为aaafunction opencloseall(flag){
    var table=document.getElementById("aaa");
    var divs = table.getElementsByTagName("div"); 
    for(var i=0;i<=divs.length;i++){
    var div = divs[i];
    div.style.display=flag?"":"none";
    }
    }然后使用opencloseall(true)就是全部显示.opencloseall(false)就是全部关闭.
      

  5.   

    谢谢 natineprince 和 xiaojing7    请问怎么避免让页面刷新吗？