对前边不完善的修改

<!DOCTYPE html>
<html>
<head>
<title>test.html</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>
<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" onclick="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>

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

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

    今天朋友让我忙帮给写个页面,由于时间紧破,所以没有完善,暂时先贴出来,以后有时间了在做修改 <!DOCTYPE html><html><head><title ...

  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. NOIP2010 乌龟棋

    2乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌 ...

  2. volatile，可变参数，memset,内联函数，宽字符窄字符，国际化，条件编译，预处理命令，define中##和#的区别，文件缓冲，位域

    1.volatile: 要求参数修改每次都从内存中的读取.这种情况要比普通运行的变量需要的时间长. 当设置了成按照C99标准运行之后,使用volatile变量之后的程序运行的时间将比register的 ...

  3. mysql 处理中文乱码问题

    CREATE TABLE tbl_score( `ID` INT NOT NULL, `score` DEC(,) NOT NULL, `subject` VARCHAR() NOT NULL ); ...

  4. 【解决】Django项目废弃SQLite3拥抱MySQL

    SQLite3数据库就一个文件,拷贝着随时带走,调试方便,超级轻量级,有它的好处. 不过,MySQL才是中小项目的主流,最近想把Django里程碑项目部署到SAE上,所以试着把原来的项目数据库替换成M ...

  5. HDU-4605 Magic Ball Game 树状数组+离散+dfs

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4605 题意:给一颗树,每个节点有个权值w[u],每个节点只有两个儿子或者没有儿子,从根节点放下一个小球 ...

  6. 给Qt应用程序添加图标文件ico setWindowIcon

    1:通过qmake生成makefile实现过程: (1) 找到一张图片.ico,名字改为myappico.ico:注意:Qt5.2中 ico文件是256 * 256. (2) 创建一个新的文本文档,内 ...

  7. oracle 修改用户下部分表现有表空间

    工作日记之<修改用户表现有表空间> //user_tables可查询出当前登录用户的所有表,以及部分表信息,可以灵活运用于其他用途 //假设现有表空间TS1.TS2,需要迁移所有表空间TS ...

  8. MySQL 常用语句 （汇集）

    原文地址:MySql常用语句作者:wuyanle 一.mysql常用语句 创建,删除和最基本查询: 显示数据库  mysql->show databases; 创建数据库  mysql-> ...

  9. Visual C#使用DirectX实现视频播放

    Visual C#使用DirectX实现视频播放 visual|视频播放 - 很多人第一次接触到DirectX大都是通过游戏,至于安装.升级DirectX的原因无非是满足游戏运行的需要.Direct ...

  10. 基础数据结构 之 树（python实现）

    树是数据结构中常用到的一种结构,其实现较栈和队稍为复杂一些.若树中的所有节点的孩子节点数量不超过2个,则该为一个二叉树.二叉树可用于查找和排序等.二叉树的主要操作有:建树,遍历等.遍历是树中的一个最为 ...