JS:添加删除练习

最新推荐文章于 2021-10-20 08:50:47 发布
原创 最新推荐文章于 2021-10-20 08:50:47 发布 · 281 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用JavaScript操作DOM实现网页上员工信息的动态增删功能，包括通过confirm弹窗确认删除操作，以及两种添加员工信息的方法，一种是手动创建DOM元素，另一种是直接设置tr的innerHTML。
实现图片中的Delete和Submit功能

在这里插入图片描述

https://www.w3school.com.cn/jsref/dom_obj_window.asp

1.点击超链接以后，删除一个员工的信息
  • confirm()用于弹出一个带有确认和取消按钮的提示框
    • 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
    • 如果用户点击确认则会返回true，如果点击取消则返回false
  • 点击超链接以后，超链接会跳转页面，这个是超链接的默认行
    • 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
/*
		 * 点击超链接以后，删除一个员工的信息
		 */
		//获取所有额超链接
		var allA = document.getElementsByTagName("a");
		//为每个超链接都绑定一个单击响应函数
		for(var i=0 ; i < allA.length ; i++){
			allA[i].onclick = function(){
				
				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;
				
				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;
				
				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除"+name+"吗?");
				
				//如果用户点击确认
				if(flag){
					//删除tr
					tr.parentNode.removeChild(tr);
				}
				
				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};
		}
2.添加员工功能

方法一：比较复杂

/*
		添加员工功能
		点击按钮后，将信息添加到表格中
		*/
		var addEmpButton = document.getElementById("addEmpButton");
		addEmpButton.onclick = function(){
			//获取用户添加的员工信息
			
			//获取员工的名字\email\salary
			var name = document.getElementById("empName").value;
			var email = document.getElementById("email").value;
			var salary = document.getElementById("salary").value;
			console.log(name+email+salary);
			
			/*封装成如下结构
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>			
			*/
		   //创建tr
		   var tr = document.createElement("tr");
		   //创建4个td
		   var nameTd = document.createElement("td");
		   var emailTd = document.createElement("td");
		   var salaryTd = document.createElement("td");
		   var aTd = document.createElement("td");
		   //创建一个a元素
		   var a = document.createElement("a");
		   //创建文本节点
		   var nameText = document.createTextNode(name);
		   var emailText = document.createTextNode(email);
		   var salaryText = document.createTextNode(salary);
		   var delText = document.createTextNode("Delete");
		   
		   //将文本添加到td中
		   nameTd.appendChild(nameText);
		   emailTd.appendChild(emailText);
		   salaryTd.appendChild(salaryText);
		   
		   //向a中添加文本
		   a.appendChild(delText);
		   //将a添加到td中
		   aTd.appendChild(a);
		   
		   //将td添加到tr中
		   tr.appendChild(nameTd);
		   tr.appendChild(emailTd);
		   tr.appendChild(salaryTd);
		   tr.appendChild(aTd);
		   
		   //向a中添加href属性
		   a.href = "javascript:;";
		   //为新添加的a再绑定一次单击响应函数
		   a.onclick = function(){
			   var tr = this.parentNode.parentNode;
			   var name = tr.children[0].innerHTML;
			   var flag = confirm("确认删除"+name+"吗?");
			   if(flag){
			   	tr.parentNode.removeChild(tr);
			   }
			   return false;
		   };
		   
		   //获取table 
		   var employeeTable = document.getElementById("employeeTable");
		   //获取employeeTable中的tbody,tbody是由浏览器产生的
		   var tbody = employeeTable.getElementsByTagName("tbody")[0];
		   //将tr添加到tbody中
		   tbody.appendChild(tr);
		};

在这里插入图片描述

  • 方法二：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
	
	window.onload = function(){
		
		/*
		 * 点击超链接以后，删除一个员工的信息
		 */
		//获取所有额超链接
		var allA = document.getElementsByTagName("a");
		//为每个超链接都绑定一个单击响应函数
		for(var i=0 ; i < allA.length ; i++){
			allA[i].onclick = function(){
				
				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;
				
				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;
				
				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除"+name+"吗?");
				
				//如果用户点击确认
				if(flag){
					//删除tr
					tr.parentNode.removeChild(tr);
				}
				
				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};
		}
		
		/*
		添加员工功能
		点击按钮后，将信息添加到表格中
		*/
		var addEmpButton = document.getElementById("addEmpButton");
		addEmpButton.onclick = function(){
			//获取用户添加的员工信息
			
			//获取员工的名字\email\salary
			var name = document.getElementById("empName").value;
			var email = document.getElementById("email").value;
			var salary = document.getElementById("salary").value;
			console.log(name+email+salary);
			
			/*封装成如下结构
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>			
			*/
		   //创建tr
		   var tr = document.createElement("tr");
		   //设置tr的内容
		   tr.innerHTML = 	"<td>"+name+"</td>"+
							"<td>"+email+"</td>"+
							"<td>"+salary+"</td>"+
							"<td><a href ='javascript:;'>Delete</a></td>";
			var a = tr.getElementsByTagName("a")[0];
			a.onclick = function(){
				var tr = this.parentNode.parentNode;
				var name = tr.children[0].innerHTML;
				var flag = confirm("确认删除"+name+"吗?");
				if(flag){
					//删除tr
					tr.parentNode.removeChild(tr);
				}
				return false;
			};
			//获取table
			var employeeTable = document.getElementById("employeeTable");
			//获取employeeTable中的<tbody>
			var tbody = employeeTable.getElementsByTagName("tbody")[0];
			//将tr添加到tbody中
			tbody.appendChild(tr);
			
		};
	};

	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>
F_aF_a
关注
JS—添加删除记录练习
一介白衣入江南
06-01 1971
<!doctype html> <html> <head> <meta charset="utf-8"> <title>添加删除记录练习</title> <style> .employeeTable { border:1px solid red; } </style> /* 1.c...
表格内容的新增&删除
weixin_48732879的博客
10-12 157
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> function delA(){ var tr = this.parentNode.parentNode; var td = tr.firstElementChild.innerText
JS基础_添加删除记录练习-添加
兴趣是最好的老师
11-22 371
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel...
JavaScript基础-添加删除记录练习
bigmeow_lyj的博客
04-20 241
由<table> 标签来定义表格 由 <tr> 标签定义行 由 <td>标签定义字母每行被分割为若干单元格 表格： <table id="employeetable"> <tr> <th>Name</th> <th>Email</th> <th>Sala...
d3.js--03（增删改查)
weixin_30897079的博客
04-18 139
选择元素 d3.select()：是选择所有指定元素的第一个 d3.selectAll()：是选择指定元素的全部 插入元素 append()：在选择集末尾插入元素 insert()：在选择集前面插入元素 　　例： 1 　　body.append("p") 2 　　.text("append p element"); 1 body.i...
JS中的添加删除记录练习--添加（包含思路）
Fantasc的博客
08-06 251
** 要求：在表格中输入员工信息，点击提交按钮将用户输入的员工信息添加到员工信息表格中。 思路： 因为要用到添加删除练习里面的代码，所以要结合着删除的功能代码一起看。 既然是要点击提交按钮，那第一步就会来获取到要点击的按钮，并为按钮绑定单击响应函数。 获取用户输入的员工的信息，因为是在input框中输入的，只要获取到input框中的内容就行，利用value属性来获取input框中的内容。 需要将用户的信息保存到表格的tr元素节点中，先通过createElement方法来创建一个tr元素，再创建四个td元素
精选资源
atguigu-js:尚硅谷 JavaScript练习
05-26
与HTML的交互是前端开发的日常，JavaScript可以操作DOM（文档对象模型），进行元素的选择、添加、删除、修改，以及事件监听和响应。理解DOM遍历和DOM操作的性能优化也是很重要的。 另外，学习JavaScript还应关注ES...
Programacion-JS:网页 Javascript 练习
06-19
你可以使用DOM方法来选择、添加、删除或修改页面元素，如getElementById、querySelector、querySelectorAll、appendChild、removeChild等。 四、事件处理 JavaScript通过事件监听来响应用户的交互，如点击、滚动、...
dataStructures_JS:用Javascript练习数据结构
03-31
在ES6中，JavaScript引入了Set数据结构，提供了添加、删除元素以及检查元素是否存在的方法。 7. 树（Tree）：树是一种非线性的数据结构，包含一个根节点和若干子节点。常见的树结构有二叉树、二叉搜索树、平衡树...
js_park：js demo练习场
02-21
6. **DOM操作**：Document Object Model (DOM)是HTML和XML文档的结构化表示，JavaScript可以通过DOM API来修改网页内容，如添加、删除或修改元素。 7. **AJAX**：Asynchronous JavaScript and XML，虽然现在更多的...
TodoMVC:TodoMVC JavaScript 练习
05-31
- **模型（Model）**：在TodoMVC中，模型通常表示待办事项，包含事项的标题、状态等属性，以及添加、删除、切换状态等操作。 - **视图（View）**：视图根据模型的数据生成DOM元素，显示待办事项，并监听用户的交互...
javaScript常规用法F
闲来之笔
04-30 1418
 /** * 業務画面を閉じます。 */function closeAllMainWin(mainWins, mainWinNms) { if (mainWins == null) {  return; } var winNmCnt = mainWinNms.length; for (var i = 0; i   var win = mainWins[mainWinNms[i]];  if (wi
（JS练习一）JS的添加、删除功能练习
m0_47974640的博客
08-18 703
给一个表格 用js实现： 1.点击delete后跳出确认框，确认则删除本行，取消则不删除； 2，在想添加员工的表格中输入信息，点击提交按钮，员工信息自动加入第一个表格。 3，第一表格中新添加的员工信息也要有delete和确认功能。 第1个功能： 分析：delete是超链接，所以我们要绑定的是表一的所有超链接，但要删除的是超链接所在的行tr；a的父亲的父亲的是tr，然后tr自己删除自己 window.onload = function () { // 分析：delete是超链接，
javaScript进阶 ES6 详细全解，解构赋值，Proxy，箭头函数，class类， 模块，export和import，Promise，then 方法，async等等
cao919的专栏Net
10-20 1991
前言：读万卷书不如行万里路,行万里路不如名师指路，还是阅人无数？ 解构赋值 Proxy 6.class类 7.模块 export和import as 的用法& export default Promise&then方法 async javaScript进阶 一、作用域 JS的作用域简单来说就是变量（变量作用于又称上下文）和函数生效（能被访问）的区域 1.全局作用域 ...
JS添加删除记录练习
weixin_43571052的博客
03-07 498
效果图 html和JS代码 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text
JavaScript--实现EMAIL功能
MRman0404的博客
03-27 697
JavaScript--实现EMAIL功能 <script language="javascript"> function mailpage() { mail_str = "mailto:xxx@21cn.com?subject=推荐网页: " + document.title; mail_str += "&body=我向你推荐这个页面，希望你喜欢！网页标题...
JS:运算符
F_aF_a的博客
12-23 138
运算法也叫操作符 通过运算符也可以对一个或多个值进行运算 比如：typeof就是运算符（将值的类型以字符串的形式返回），可以获得一个值的类型 算数运算符：+ - * / % + 两个字符串用 + 运算，会做“拼接操作” 任何的值和字符串做加法运算，都会先转化为字符串再操作 对非Number计算时，会先转成Number 任何值和NaN做操作，结果都是NaN - ...
JS：三目运算符
F_aF_a的博客
12-24 218
条件运算符也叫三元运算符 条件表达式？语句1：语句2 先对条件表达式求值，如果为true就执行语句1，否则执行语句2 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascr...
javascript 总结（常用工具类的封装）
weixin_33836223的博客
01-30 285
前言 因为工作中经常用到这些方法，所有便把这些方法进行了总结。 JavaScript 1. type 类型判断 isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } isNumber (o) { /...
在线JavaScript课程：JS HTTP练习教程
课程练习可能会教授如何使用JavaScript来响应这些事件，如添加事件监听器、使用事件对象、事件冒泡和捕获机制等。 4. 表单处理：在HTTP课程练习中，还可能包括表单输入数据的获取、验证和提交。这涉及表单元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值