html页面按钮布局,js动态生成按钮，页面用DIV简单布局(示例代码)

今天朋友让我忙帮给写个页面，由于时间紧破，所以没有完善，暂时先贴出来，以后有时间了在做修改

* {

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;

}

header

total = document.documentElement.clientHeight;

colHeight = total - 100 - document.getElementById("leftDiv").offsetTop;

document.getElementById("leftDiv").style.height = colHeight + "px";

document.getElementById("centerDiv").style.height = colHeight + "px";

document.getElementById("rightDiv").style.height = colHeight + "px";

var i = 0;

function addButton() {

var button_create1 = document.getElementById("button_create1");

var letfDiv_ul=document.getElementById("l_ul1");

var o = document.createElement(‘input‘);

var li=document.createElement(‘li‘);

o.type = ‘button‘;

o.value = ‘按钮‘ + i++;

if (button_create1.attachEvent) {

button_create1.attachEvent(‘onclick‘, addButton);

} else {

button_create1.addEventListener(‘click‘, addButton);

}

//document.body.appendChild(o);

li.appendChild(o);

letfDiv_ul.appendChild(li);

o = null;

}

/**

* 创建中间div的input

*/

var ii = 0;

function addInput(){

var button_create2=document.getElementById("button_create2");

var centerDiv_ul=document.getElementById("c_ul1");

var c_input = document.createElement(‘input‘);

var c_input_btn = document.createElement(‘input‘);

c_input_btn.type = ‘button‘;

c_input_btn.value = ‘按钮‘+ i++;

if(c_input_btn.attachEvent){

alert();

c_input_btn.attachEvent(‘onclick‘,addInput_select)

}else{

c_input_btn.addEventListener(‘click‘,addInput_select)

}

var li=document.createElement(‘li‘);

c_input.type = ‘text‘;

c_input.value = ‘input‘ + ii++;

if (button_create2.attachEvent) {

button_create2.attachEvent(‘onclick‘, addInput);

} else {

button_create2.addEventListener(‘click‘, addInput);

}

li.appendChild(c_input);

li.appendChild(c_input_btn);

centerDiv_ul.appendChild(li);

}

var iii = 0;

function addInput_select(){

alert();

var rightDiv_ul=document.getElementById("r_ul1");

for(var n=0;n<4;n++){

var o = document.createElement(‘input‘);

var li=document.createElement(‘li‘);

o.value=n;

li.appendChild(o);

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;

}

rightDiv_ul.appendChild(li);

o = null;

}

}

window.onload = function(){

addInput_select();

addInput();

addButton();

};