您的位置：首页 > 其它

动态创建标签

2015-08-10 20:13 477 查看

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航