您的位置：首页 > Web前端 > JavaScript

[zz]js动态div添加

2011-05-02 19:13 288 查看

<mce:script type="text/javascript"><!--
function showval()
{
var str
document.form1.input2.value = document.form1.input1.value;
f_creatediv(document.form1.input2.value)
}
// js创建DIV
var objdiv, objname
function f_creatediv(num)
{
var add_div,add_name;
add_div=document.createElement("DIV")
add_name="show_div"
add_div.id="show_div1"
document.body.appendChild(add_div);
document.getElementById('show_div1').style.display = "";
for(var i = 0; i < num; i ++ )
{
objdiv = document.createElement("DIV");
objname = "shop_" + i
objdiv.id = objname;
objdiv.style.top = 100 * i + 100;
objdiv.style.left = 100 * i + 100;
objdiv.style.background = '#FFFF00';
objdiv.style.visibility = 'visible';
objdiv.style.width = 100;
objdiv.style.height = 20;
objdiv.style.border = "5 groove black";
objdiv.innerHTML = "SHOP_" + i;
document.getElementById('show_div1').appendChild(objdiv);
document.getElementById(objname).onmouseover = function()
{
// alert(this.id)
this.style.background = '#999999';
}
;
document.getElementById(objname).onmouseout = function()
{
this.style.background = '#FFFF00';
}
;
document.getElementById(objname).onclick = function()
{
document.form1.input1.value = this.id;
document.getElementById('show_div1').removeNode(true);
// f_creatediv(num)//
}
;
}
}
// --></mce:script>

<html>
<head>
<title></title>
//<mce:style type="text/css"><!--
#div1 {
position:absolute;
left:10px;
top:67px;
width:360px;
height:96px;
z-index:1;
}
--></mce:style><style type="text/css" mce_bogus="1">#div1 {
position:absolute;
left:10px;
top:67px;
width:360px;
height:96px;
z-index:1;
}</style>
</head>
<body>
<!--<div id="div1"></div>-->
<form name="form1" >
<p>
<input name="input1" id="input1" value="5" onClick="showval()" />
<input name="input2" id="input2" value=""/>
</p>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航