通过JavaScript动态生成html控件
2015-06-04 18:04
741 查看
示例代码
效果
1. 开始页面
2. 点击添加按钮
3. 修改学生姓名
4. 点击删除
5. 删除后的页面
<html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> <title>动态生成控件</title> <script> var i=1; function add() { var top = document.getElementById("top"); var div = document.createElement("div"); var input = document.createElement("input"); var del = document.createElement("input"); div.innerHTML="学生" + i + " "; div.id = i; input.type = "text"; input.name = "v"; input.value = "jihite"; input.id = "v" + i; del.type = "button"; del.name = "d"; del.value = "删除"; del.id = 'd' + i; del.onclick = function remo() { alert("删除学生:" + input.value); top.removeChild(div); }; i = i + 1; div.appendChild(input); div.appendChild(del); top.appendChild(div); } </script> </head> <body> <div> <input type="button" onclick="add()" value="添加" /> </div> <div id="top"> </div> <div id="output"> </div> </body> </html>
效果
1. 开始页面
2. 点击添加按钮
3. 修改学生姓名
4. 点击删除
5. 删除后的页面
相关文章推荐
- flipsnap.js 源码阅读备份
- javascript实现SHA1算法
- AJAX jsonp 跨域请求code
- javascript实现删除前弹出确认框
- C json 服务端解析字符串,生成哈希表
- js遍历对象的属性并且动态添加属性并提交表单
- javascript星级评分(多个)
- javascript核心概念
- js判断是否是数字
- JavaScript通过Date-Mask将日期转换成字符串的方法
- jstack命令使用
- jsp中Get方式请求参数乱码的两种解决方式
- JS数组的常用方法总结
- js作用域
- javascript 类继承
- js实现的笛卡尔乘积-商品发布
- js操作cookie方法
- 由浅入深学习ajax跨域(JSONP)问题
- 使用servlet技术向浏览器发送JSON格式数据
- JS实现验证码倒计时效果