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

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

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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 onload="addInput()">
<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="centerDiv">
<ul id="c_ul1">

</ul>
<input type="button" id="button_create2" class="button1" value="创建2">
</div>
<div id="rightDiv">
<ul id="r_ul1">

</ul>
</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("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();
};
</script>
</body>
</html>

js动态生成按钮，页面用DIV简单布局的更多相关文章

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

    对前边不完善的修改 <!DOCTYPE html><html><head><title>test.html</title> <meta ...

  2. htmlunit爬虫工具使用--模拟浏览器发送请求，获取JS动态生成的页面内容

    Htmlunit是一款模拟浏览抓取页面内容的java框架,具有js解析引擎(rhino),可以解析页面的js脚本,得到完整的页面内容,特殊适合于这种非完整页面的站点抓取. 下载地址: https:// ...

  3. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  4. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  5. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  6. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  7. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  8. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  9. js 动态生成html 触发事件传参字符转义

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 “单.双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决.下面就来 ...

随机推荐

  1. Bzoj-2005 能量采集 gcd,递推

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2005 题意:题目转换后的模型就是求Σ(gcd(x,y)), 1<=x<=n, ...

  2. Android 4.1.1源码编译

    适用环境: 系统:ubuntu-12.04.2-desktop-amd64 JDK:sun-java6-jdk Android源码:android_4.1.1_r1 虚拟机安装: VMware Wor ...

  3. 【组队训练】2015-2016 ACM-ICPC, NEERC, Southern Subregional Contest

    好多oj都崩掉了,于是打了cf.. 开始开的最后一题...尼玛题好长终于看完了...神题不会.... I过了好多人..看了下,一眼题...随便敲了下,1A ]; int main(){ int n, ...

  4. python 获取对象信息

    当我们拿到一个对象的引用时,如何知道这个对象是什么类型.有哪些方法呢? 使用type() 首先,我们来判断对象类型,使用type()函数: 基本类型都可以用type()判断: >>> ...

  5. GridView多行标题行、改造标题行、自定义标题行完美版

    网上找了个找,最终还是自己做的比较靠谱,道理很简单,直接看代码 代码:   /// <summary> /// =================== 两行标题行 ============ ...

  6. C++学习笔记（十四）：模板

    模板就是实现代码重用机制的一种工具,它可以实现类型参数化,即把类型定义为参数,从而实现了真正的代码可重用性.模版可以分为两类,一个是函数模版,另外一个是类模版.Java中对应的技术称为泛型. 函数模板 ...

  7. 【Android - MD】之Snackbar的使用

    Snackbar 是 Android 5.0 新特性--Material Design 中的一个控件,用来代替 Toast ,Snackbar与Toast的主要区别是:Snackbar可以滑动退出,也 ...

  8. HDU4279(2012年天津网络赛---数论分析题)

    题目:Number 题意: 给出一个f(x),表示不大于x的正整数里,不整除x且跟x有大于1的公约数的数的个数.定义F(x),为不大于x的正整数里,满足f(x)的值为奇数的数的个数.题目就是求这个F( ...

  9. Sql Server 存储过程使用技巧

    1.创建带Try...Catch的存储过程模板 Copy下面的代码,然后新建查询,就可以写sql语句,执行完后,一个你自己的存储过程就建立好了! USE [DB]--设定对应的数据库 GO SET A ...

  10. VMware 虚拟机安装 Mac OS X Mountain Lion 苹果系统

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...