JS DOM版--添加删除记录（原创）

最新推荐文章于 2022-10-17 15:33:29 发布

最新推荐文章于 2022-10-17 15:33:29 发布 · 194 阅读

文章标签：

#XHTML #JavaScript #code #Ajax #ViewUI

javascript学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的网页应用程序，该程序使用JavaScript实现用户信息的动态添加和删除功能。通过创建HTML元素并利用DOM操作来更新表格内容，展示了基本的前端交互技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>