js动态生成按钮，页面用DIV简单布局2

最新推荐文章于 2023-02-14 09:30:32 发布

weixin_30832983

最新推荐文章于 2023-02-14 09:30:32 发布

阅读量192

点赞数

原文链接：http://www.cnblogs.com/mm0712/p/6227328.html

版权

对前边不完善的修改

<!DOCTYPE html>
<html>
<head>
<title>test.html</title>

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

.header {
width: 100%;
background: #567;
height: 100px;
}

#leftDiv,#centerDiv,#rightDiv {
float: left;
background: #DDD;
margin-right: 10px;
word-wrap: break-word;
font-size: 12px;
}

#rightDiv {
width: 60%;
}

#leftDiv {
width: 19%;
}

#centerDiv {
width: 18%
}

#foot {
height: 100px;
background-color: #ccc;
clear: both;
}

#middle {
zoom: 1;
}
.li{
width:100px;
}
</style>
</head>

<body>
<div class="header" id="XX">header</div>
<div id="middle">
<div id="leftDiv">
<ul id="l_ul1">

</ul>
<input type="button" id="button_create1" class="button1" value="创建1">
</div>

<div id="rightDiv">
<input type="button" id="button_create2" class="button1" value="创建2" οnclick="addInput_button();">
<dl id="dl_1">
<dt>sss1</dt>
<dd>
<ul>
<li>s1</li>
<li>s1</li>
</ul>
<dd>

<dt>sss2</dt>
<dd>ss<dd>
<dd>ss<dd>
</dl>
</div>
</div>
<div id="foot"></div>
<script>
total = document.documentElement.clientHeight;
colHeight = total - 100 - document.getElementById("leftDiv").offsetTop;
document.getElementById("leftDiv").style.height = colHeight + "px";
document.getElementById("rightDiv").style.height = colHeight + "px";

var i =0;
function addInput_button(){
//alert();
var rightDiv=document.getElementById("rightDiv");
var dl_1=document.getElementById("dl_1");
var dt = document.createElement('dt');
var dd = document.createElement('dd');
var ul = document.createElement('ul');
ul.id=i;

dd.appendChild(ul);
dt.id = i;
//创建文本框和button
var dt_input1=document.createElement('input');
dt_input1.value=i;
dt_input1.type='text';
var dt_input2=document.createElement('input');

dt_input2.value='button'+i;
dt_input2.type='button';
// 给button 绑定click事件
if(dt_input2.attachEvent){
alert();
dt_input2.attachEvent('onclick',addInput_select)
}else{

dt_input2.addEventListener('click',addInput_select)
}
//将文本框绑定到dt标签
dt.appendChild(dt_input1);
//将button绑定到dt标签
dt.appendChild(dt_input2);
dl_1.appendChild(dt);
dl_1.appendChild(dd);
i++;

}
var iii = 0;
function addInput_select(){
alert();
// 得到当前button的父标签
var id=event.srcElement.parentElement.id;
alert(id);
var ss=document.getElementById(id)
alert(ss)

var input = document.createElement('input');
var li=document.createElement('li');
li.appendChild(input);
for(var z=0;z<2;z++){//这个循环呢是控制创建几个下拉框
var select = document.createElement('select');
for(var y=0;y<4;y++){//这个循环呢是控制下拉框的选项有几个
select.options.add(new Option(y,y));
}
li.appendChild(select);
select=null;
}
ss.appendChild(li);
}
window.onload = function(){
addInput_button();

};

</script>
</body>
</html>

转载于:https://www.cnblogs.com/mm0712/p/6227328.html

weixin_30832983

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js动态生成按钮，页面用DIV简单布局2

对前边不完善的修改<!DOCTYPE html><html><head><title>test.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" c...
复制链接

扫一扫