动态创建标签
来源:互联网 发布:网络女主播不雅视频 编辑:程序博客网 时间:2024/06/05 09:17
9,动态创建标签
9-1,创建的属性方法
创建元素:createElement("标签");
添加元素:appendChild("标签");
设置属性:setAttribute("属性名","属性值");
创建文本:createTextNode("文本内容");
删除一个元素:removeChild("标签");
获取父节点:parentNode;
9-2,动态创建一个table演示
<script type="text/javascript">
function createTable(){
//获取table元素
var tab=document.getElementById("tab");
//默认创建5行
for(var i=1;i<=5;i++){
//创建一个tr
var tr=document.createElement('tr');
//设置当前行的id属性值
tr.setAttribute('id','tr'+i );
tr.setAttribute('height','50px');
//创建一个td存放姓名
var td1=document.createElement('td');
var pass1=document.createElement('input');
//设置input标签的类型
pass1.setAttribute('type', 'text');
pass1.setAttribute('style', 'width:100px;height:20px;');
pass1.setAttribute('height', '100%');
//把当前的文本节点添加到对应的td中
td1.appendChild(pass1);
//创建文本节点
var text1=document.createTextNode("张三");
//把当前的文本节点添加到对应的td中
td1.appendChild(text1);
//把当前的td节点添加到对应的tr中
tr.appendChild(td1);
//创建一个td存放密码
var td2=document.createElement('td');
//创建文本节点
var pass=document.createElement('input'); pass.setAttribute('type', 'password');
pass.setAttribute('style', 'width:100px;height:20px;');
pass.setAttribute('height', '100%');
td2.appendChild(pass);
tr.appendChild(td2);
//创建下拉框
var td3 = document.createElement('td');
var sel = document.createElement('select');
sel.appendChild(getOption('程序员'));
sel.appendChild(getOption('程序猿'));
sel.appendChild(getOption('教师'));
sel.appendChild(getOption('销售'));
td3.appendChild(sel);
tr.appendChild(td3);
//创建性别
var td4 = document.createElement('td');
var sex = document.createElement('input');
sex.setAttribute('type', 'radio');
var ts = document.createTextNode('男');
var sex1 = document.createElement('input');
sex1.setAttribute('type', 'radio');
var ts1 = document.createTextNode('女');
sex.setAttribute('name','sex'+i);
sex1.setAttribute('name', 'sex'+i);
td4.appendChild(sex);
td4.appendChild(ts);
td4.appendChild(sex1);
td4.appendChild(ts1);
tr.appendChild(td4);
//创建一个删除按钮
var td5 = document.createElement('td');
var but = document.createElement('input');
but.setAttribute('type', 'button');
but.setAttribute('value', '删除');
//把每个删除按钮绑定一个单击事件
but.setAttribute('onclick', 'deleteTr("tr'+i+'")'); td5.appendChild(but);
tr.appendChild(td5);
var td6 = document.createElement('td');
var but1 = document.createElement('input');
but1.setAttribute('type', 'button');
but1.setAttribute('value', '提交');
//把每个删除按钮绑定一个单击事件
but1.setAttribute('onclick', 'onsubimt("tr'+i+'")');
td6.appendChild(but1);
tr.appendChild(td6);
//把每一行添加到table中
tab.appendChild(tr);
}
}
//删除指定 的tr
function deleteTr(trid){
//获取要删除的行
var tr = document.getElementById(trid);
//获取当前行的父节点
var p = tr.parentNode;
//通过父节点删除子节点
p.removeChild(tr);
}
//创建option
function getOption(text){
var op = document.createElement('option');
//创建一个文本节点
var t = document.createTextNode(text);
op.setAttribute('value', text);
op.appendChild(t);
return op;
}
</script>
</head>
<body onload="createTable()">
<div style="margin-left: 400px;margin-top: 100px;">
<table id="tab" border="2px;" style="margin:0 auto">
<tr><td>姓名</td><td>密码</td><td>职业</td>
<td>性别</td><td>操作</td><td>提交</td></tr>
</table>
</div>
</body>
</html>
- js 创建动态标签
- js创建动态标签
- js动态创建标签
- JS动态标签创建
- 动态创建标签
- 动态创建标签
- 动态创建script标签
- js动态创建html标签
- js动态创建元素、标签
- JS动态创建HTML标签
- 动态创建标签并且增加响应事件
- js 用CreateElement动态创建标签 //*************************************//
- js 用CreateElement动态创建标签
- ASP.NET动态创建Media标签
- Dom7(动态创建标签,获取页面元素)
- webView加载html动态创建标签
- 自定义ViewGroup实现标签换行(动态创建标签
- struts中创建动态复选框标签的使用
- C语言 sscanf,sprintf函数 使用总结
- hdu1503 Advanced Fruits
- 点的旋转
- After Windows 10 upgrading deleting previous windows installation
- I/O多路复用详解(三)
- 动态创建标签
- 树状数组区间维护及单点查询
- hdu-1513-Palindrome
- Object-C类目、延展
- UNITY3D学习笔记14
- 智能指针的原理与设计
- python基础教程学习笔记 — 准备Windows下开发环境
- Tomcat关闭过程(Tomcat源码解析四)
- Android侧滑--防QQ实现侧滑