您的位置：首页 > 其它

dom节点的添加与删除

2013-04-01 15:50 316 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>生成表格信息</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

body{

width:700px;

margin:0 auto;

font-size:14px;

}

a{

text-decoration:none;

}

img{

border:0;

}

ul{

list-style-type:none;

}

ul li{ float:left}

#kuai{ width:700px; margin:100px auto;}

</style>

</head>

<body>

<div id="kuai" align="center">

<form action="" >

姓名：<input type="text" id="name1" onfocus="this.select();"/>

emil:<input type="text" id="email" onfocus="this.select();"/>

电话：<input type="text" id="phon" onfocus="this.select();"/>

<br /><br />

<input type="button" onclick="add()" value="提交" />

</form>

</div>

<div id="tab">

<table border="2px" cellspacing="0" cellpadding="0" id="table1" width="500px" align="center">

<tr align="center">

<td>姓名</td>

<td>email</td>

<td>电话</td>

<td></td>

</tr>

</table>

</div>

<script type="text/javascript">

var i=0;

function add(){

var table1=document.getElementById('table1');
<!--获取已有表格节点--><!--原创：董宏宇；qq：1358506549-->

var tr=document.createElement('tr');
<!--创建行节点-->

var td1=document.createElement('td');
<!--创建列节点-->

var td2=document.createElement('td');
<!--创建列节点-->

var td3=document.createElement('td');
<!--创建列节点-->

var td4=document.createElement('td');

var nam=document.getElementById('name1');
<!--获取输入输入内容-->

var ema=document.getElementById('email');

var pho=document.getElementById('phon');

//var newbutton=document.createElement('input');
<!--插入按钮-->

td1.innerText=nam.value;
<!--将获取内容添加到列内-->

td2.innerText=ema.value;

td3.innerText=pho.value;<!--原创：董宏宇；qq：1358506549-->

//newbutton.type="button";
<!--定义按钮类型-->

//newbutton.value="删除";

//newbutton.onclick="delete()";

//td4.appendChild(newbutton);

td4.innerHTML= '<a href="javascript:delefile('+i+');">删除</a>';<!--向第四列添加链接-->

tr.appendChild(td1);
<!--将创建的列节点添加到行内-->

tr.appendChild(td2);

tr.appendChild(td3);<!--原创：董宏宇；qq：1358506549-->

tr.appendChild(td4);

table1.appendChild(tr);

tr.setAttribute("id","tr_"+i);
<!--设置tr属性-->

i++;<!--原创：董宏宇；qq：1358506549-->

}

function delefile(id){ <!--删除节点-->

document.getElementById('tr_'+id).innerHTML = "";

<!--原创：董宏宇；qq：1358506549-->

}

</script>

</body>

</html>

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