dom节点的添加与删除

最新推荐文章于 2024-10-10 10:50:43 发布

PCDHY123

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量799

点赞数

分类专栏： javascript 文章标签： javascript 总结 dom 节点

本文链接：https://blog.csdn.net/PCDHY123/article/details/8746918

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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" οnfοcus="this.select();"/>
emil:<input type="text" id="email" οnfοcus="this.select();"/>
电话：<input type="text" id="phon" οnfοcus="this.select();"/>
<br /><br />
<input type="button" οnclick="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'); 

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;
//newbutton.type="button"; 
//newbutton.value="删除";
//newbutton.οnclick="delete()";
//td4.appendChild(newbutton);
td4.innerHTML= '<a href="javascript:delefile('+i+');">删除</a>';
tr.appendChild(td1); 
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
table1.appendChild(tr);

tr.setAttribute("id","tr_"+i); 
i++;
}
function delefile(id){ 

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

}
</script>
</body>
</html>