JS DOM版-增添删除记录（原创）
日期：2014-05-16 浏览次数：20306 次
JS DOM版--添加删除记录（原创）
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function add(){
var form1 = document.getElementById("form1");
var parentNode = document.getElementById("users");
//生成textNode对象
var tn1Obj = document.createTextNode(form1.user.value);
var tn2Obj = document.createTextNode(form1.email.value);
var tn3Obj = document.createTextNode(form1.tel.value);
var tn4Obj = document.createTextNode("DEL");
//生成td对象
var td1Obj = document.createElement("td");
var td2Obj = document.createElement("td");
var td3Obj = document.createElement("td");
var td4Obj = document.createElement("td");
td1Obj.appendChild(tn1Obj);
td2Obj.appendChild(tn2Obj);
td3Obj.appendChild(tn3Obj);
td4Obj.appendChild(tn4Obj);
//生成tr对象
var trObj = document.createElement("tr");
trObj.appendChild(td1Obj);
trObj.appendChild(td2Obj);
trObj.appendChild(td3Obj);
trObj.appendChild(td4Obj);
parentNode.appendChild(trObj);
}
function del(x){
var y = x.parentNode;
var z = x.parentNode.parentNode;
z.removeChild(y);
}
</script>
</head>
<body>
[align=center]
添加用户
<form action="" id="form1">
用户 <input type="text" id="user" />
email <input type="text" name="email" />
电话 <input type="text" name="tel" />
<input type="button" onclick="add()" value="添加">
</form>
[/align]
<hr>
[align=center]
<table id="users" border="1">
<tr>
<td>tom</td>
<td>tom@tom.com</td>
<td>500</td>
<td onclick="del(this)"><font color="red">DEL</font></td>
</tr>
<tr>
<td>Jerry</td>
<td>Jerry@tom.com</td>
<td>600</td>
<td onclick="del(this)"><font color="red">DEL</font></td>
</tr>
</table>
[/align]
</body>
</html>
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
