颠覆软件

关注 : 架构与设计,敏捷,快速开发,项目管理,执行力,SSH,RoR

javascript两则:树与eval函数

Posted in HTML on May 16, 2006

key words: 动态树 eval函数用法

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

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

<!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“
}
}

Leave a Reply

颠覆软件 © 2006-2007