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

* {

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();

};

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

  1. html动态生成按钮事件,javascript 动态生成按钮并添加事件时为什么不响应?

    javascript 动态生成按钮并添加事件时为什么事件不响应?(谢谢大家!) 1)html部分 1 2 3 4 5 6 7 8 9 10 11 12 2)script部分 //_t 为一个现在的Ta ...

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

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

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

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

  4. 用js动态生成html页面

    首先思路明确:生成的元素是一个完整的DOM对象:这些DOM对象的属性可以是字符串,xml文件,也可以是json格式的数据,存储在后台或者其它位置:通过层层解析,顺着DOM层级关系动态创建在html文档 ...

  5. js动态生成echarts图表,并生成图片保存到本地,自定义图片名。

    目录 一.js动态生成图表 1. 效果图 2. 测试数据 3. 实现代码 二.点击下载按钮生成快照 - 图片路径 1. 效果图 2. 实现代码 三. 保存图片到本地 1. 效果图 2. 代码实现 一. ...

  6. js 动态生成html(js根据后台返回数据生成html页面中的table标签)(转义字符)

    js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...

  7. 写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好

    如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢 添加评论 分享 按投票 ...

  8. Asp.net动态生成html页面

    作者:网际浪子专栏(曾用名littlehb)  http://blog.csdn.net/littlehb/ 适用于:Microsoft ASP.NET 摘要:asp.net动态生成html页面,适用 ...

  9. 2)JS动态生成HTML元素的爬取

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

最新文章

  1. python 十大经典排序算法
  2. 基于协程的并发框架orchid简介
  3. python学习心得--编码格式篇
  4. linux awk 分组统计
  5. Boost:符号symbols找到null的测试程序
  6. 华为交换机屏蔽远程计算机,华为交换机远程telnet配置的小问题
  7. 跨域共享session (实现http跳转https 共享session)
  8. OpenCV3学习(9.2)连通域分析函数详解connectedComponents()和connectedComponentsWithStats()
  9. 在JavaScript面向对象编程中使用继承(5)
  10. Spark 0.9.1 MLLib 机器学习库简介
  11. centos SSH免密登录
  12. 安装python3并安装paramiko
  13. matlab的yalmip为什么这么慢,Yalmip使用学习
  14. PlaySound的同步播放与异步播放
  15. 博客推广——提交搜索引擎
  16. vue中图片解析失败
  17. qt(qu chu biao ti lan /窗口非暴力置顶)
  18. 深度学习之神经网络基础(1)——感知器,S型神经元,梯度下降法,神经网络架构
  19. pyinstaler打包paddle
  20. HDU 4544 湫湫系列故事——消灭兔子 (贪心+优先队列)

热门文章

  1. HtmlAgilityPack 爬虫批量获取百度音乐下载地址一
  2. Lab3因而起——对正则表达式的学习(一)
  3. VisionMaster连接工业相机(海康)
  4. STM32做平衡小车,代码,PCB都现成的,妈妈再也不用担心我的毕业设计了
  5. 理解JAVA的三大特性之---多态
  6. c语言 编写小学生100以内四则运算数学测试游戏,运用C语言开发一个“小学生算术四则运算测试系统”。...
  7. 中科院西光所成立时空大数据实验室,打造大数据运算核心基础平台
  8. 一、Pytest自动化测试框架 — Pytest和unittest测试框架原理
  9. chrome浏览器扩展安装
  10. SQL Server 2014 安装教程(图文教程,附下载地址)