javascript两则:树与eval函数

javascript两则:树与eval函数

key words: 动态树 eval函数用法

近期项目中需要在ilearning中做开发,用到大量纯jsp模式的开发,当然javaScript也用了很多,看来近期要好好研究javascript了 :)

一.树
这次要做一个树,需要支持展开和放置checkbox,开始的时候打算找一个,后来发现没有适合的,最后自己写,其实也就是用到.style.display='none'或者.style.display='block'来支持展开
显示效果如下:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > Tree </ title >
< script  language ="javascript" >
function  show(IMG,DV)
{
     if (DV.style.display == " none " )
    {
        DV.style.display = " block " ;
        IMG.src = " manager.gif "
    }
     else
    {
        DV.style.display = " none " ;
        IMG.src = " manager.gif "         
    }
}
var  display = " none " ;
var  i;
function  showall()
{
     var  divTags = document.getElementsByTagName( " div " );
     // alert(divTags[10].id.replace("DV",""));
     if ( display == " none "  )
    {
         for (i = 0 ;i < divTags.length;i ++ )
        {
            divTags[i].style.display = " block " ;
            eval( " IMG " + divTags[i].id.replace( " DV " , "" )).src = " images/btnDel.gif " ;
            display = " block "
        }
    }
     else
    {
         for (i = 0 ;i < divTags.length;i ++ )
        {
            divTags[i].style.display = " none " ;
            eval( " IMG " + divTags[i].id.replace( " DV " , "" )).src = " images/btnAdd.gif " ;
            display = " none " ;
        }
    }
}
</ script >

< SCRIPT  LANGUAGE ="JavaScript" >
function  checkAll(str)
{
   var  a  =  document.getElementsByName(str);
   var  n  =  a.length;
   for  ( var  i = 0 ; i < n; i ++ )
  a[i].checked  =  window.event.srcElement.checked;
}
function  checkItem(str)
{
   var  e  =  window.event.srcElement;
   var  all  =  eval( " document.form0. " +  str);
   if  (e.checked)
  {
     var  a  =  document.getElementsByName(e.name);
    all.checked  =   true ;
     for  ( var  i = 0 ; i < a.length; i ++ )
    {
       if  ( ! a[i].checked){ all.checked  =   false ;  break ;}
    }
  }
   else  all.checked  =   false ;
}
</ SCRIPT >


</ head >

< body >
       < a  href ="#"  ONCLICK ="show(IMG001,DV001)" >
           < img  id ="IMG001"  src ="manager.gif"  border ="0" ></ a >
           < input  type ="Checkbox"  name ="All"  onclick ="checkAll('cb')" >
 第一层

     <!-- Begin of 2 -->
             < DIV  id ='DV001'  style ='display:none' >
             &nbsp;&nbsp; < img  id ="IMG0010"  src ="user.gif"  border ="0" >
             < input  type ="checkbox"  name ="cb"  value ="1"   >
                101
                  < br >       
             &nbsp;&nbsp; < img  id ="IMG0010"  src ="user.gif"  border ="0" >
             < input  type ="checkbox"  name ="cb"  value ="1"   >
                102
                 <!-- End of 2 -->
             </ div >     
  < br >                
    < a  href ="#"  ONCLICK ="show(IMG002,DV002)" >
        < img  id ="IMG002"  src ="manager.gif"  border ="0" >
        </ a >
        < input  type ="Checkbox"  name ="fdasfdsafsd"  onclick ="checkAll('cbb')"   >
 第二层

     <!-- Begin of 2 -->
             < DIV  id ='DV002'  style ='display:none' >
             &nbsp;&nbsp; < img  id ="IMG0011"  src ="user.gif"  border ="0" >
             < input  type ="checkbox"  name ="cbd"  value ="1"  id ="cbb" >
                201
                  < br >       
             &nbsp;&nbsp; < img  id ="IMG0011"  src ="user.gif"  border ="0" >
             < input  type ="checkbox"  name ="cbd"  value ="1"  id ="cbb" >
                202
                 <!-- End of 2 -->
    </ div >     
</ body >
</ html >

2.eval函数用法
这次碰到一个问题,就是动态获取某个id的值,比如document.formX.idX.value,其中idX是动态的,所以直接写无法获得,会提示找不到某变量,这时eval就派上用场了
比如

var  myObj  =   " document.formX. " + idX;
myObj.value  =  XXValue;

详细信息参考 这里
这里再提供几个例子:

function  simpleSwap()
{
  var  the_image  =  prompt( " change parrot or cheese " , "" );
  var  the_image_name  =   " window.document. "   +  the_image;
  var  the_image_object  =  eval(the_image_name);
 the_image_object.src  =   " ant.gif " ;
}

function  tophide(id)     // id indicates menu
{
     if  (top.topframeset.rows  ==   " 31,* " )
    {
        top.topframeset.rows  =   " 86,* " ;
        eval(id  +   " _icon.src= " / imgs / collapse_up.gif' " );
        eval(id +  " _icon.alt = 'Collapse The Head' " );
        head.style.display =  " block "
        }
    else
    {
        top.topframeset.rows =  " 31 , * " ;
        eval(id +  " _icon.src = " /imgs/collapse_down.gif' " );
        eval(id  +   " _icon.alt='Expand The Head' " );
        head.style.display  =   " none "
    }
}