JS练习3——增加与删除员工

最新推荐文章于 2022-11-27 20:04:16 发布
最新推荐文章于 2022-11-27 20:04:16 发布
阅读量377 收藏 3
点赞数
分类专栏： 前端练手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51235736/article/details/111584622
版权 
<!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">

			//删除tr的响应函数
			function delA() {
				//点击超链接以后需要删除超链接所在的那行
				//这里点击哪个超链接this就是谁（this的第五种情况）
				//获取当前tr，this是a，a的父节点是td，td的父节点是tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;

				//删除之前弹出一个提示框
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}
				//取消默认行为
				return false;
			};

			window.onload = function() {

		        //点击超链接以后，删除一个员工的信息
				//获取所有超链接
				var allA = document.getElementsByTagName("a");

				//为每个超链接都绑定一个单击响应函数
				for(var i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}

				/*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */

				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {

					//获取用户添加的员工信息
					//获取员工的名字，注意input不能用.innerHTML，而是需要value
					var name = document.getElementById("empName").value;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					/*
					 *  <tr>
							<td>Tom</td>
							<td>tom@tom.com</td>
							<td>5000</td>
							<td><a href="javascript:;">Delete</a></td>
						</tr>
						需要将获取到的信息保存到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>"; //注意'javascript:;'的单引号
									
					//获取刚刚添加的a元素，并为其绑定单击响应函数			
					//虽然上边以及绑过了，由于此处是新创建的，故需要再绑一次	
					var a = tr.getElementsByTagName("a")[0];
					a.onclick = delA;
					
					//获取table
					var employeeTable = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					//将tr添加到tbodye中
					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="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td>
					<a href="javascript:;">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">
						Submit
					</button>
					</td>
				</tr>
			</table>

		</div>

	</body>

</html>

补充：

  1. confirm()用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将会作为提示文字显示出来。如果用户点击确认则会返回true，如果点击取消则返回false

  2. return false取消默认行为，比如取消a跳转页面，取消表单点击发送后将数据清空…当然，取消a的跳转页面还可以用href=“javascript:;”

  3. 学着使用如下方式，而不是一个个创建节点以及append

	//设置tr中的内容
	tr.innerHTML = "<td>"+name+"</td>"+
					"<td>"+email+"</td>"+
					"<td>"+salary+"</td>"+
					"<td><a href='javascript:;'>Delete</a></td>"; 
					//注意'javascript:;'的单引号
DanmoSAMA
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
员工增加删除
05-20
SSH整合练习
JavaScript凌厉开发——Ext JS3详解与实践
03-15
《JavaScript凌厉开发——Ext JS3详解与实践》是一本深度探讨JavaScript库Ext JS3的专著，旨在帮助开发者深入理解和高效运用这一强大的前端框架。本文将围绕标题、描述及标签，详细介绍Ext JS3的核心概念、关键特性...
JavaScript页面动态实现添加删除员工
bolovin4ever的博客
02-13 884
原生js实现页面添加删除员工的功能,最终效果如下: ![点击submit添加员工![](https://img-blog.csdnimg.cn/20200213222131921.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbG92...
HTML+JavaScript添加删除员工记录简易版
lq24244的博客
04-17 304
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table { border: 1px solid black; margin: 0 auto; } .table.
用JavaScript实现自动添加行和删除行
weixin_33726943的博客
06-01 111
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript Date删除添加员工信息练习
weixin_30856965的博客
08-01 250
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> tr{ ...
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3
04-22
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大，压缩后76M左右 所以分为四个包上传
PtrhonWeb练习项目——名片管理系统.rar
05-24
PythonWeb练习项目——名片管理系统是一个非常适合初学者提升PythonWeb开发技能的实践项目。这个系统旨在帮助用户管理和存储名片信息，提供了基本的CRUD（创建、读取、更新、删除）功能，通过前后端交互实现数据的...
网页模板——javascript 在线打字练习.zip
11-22
【标题】"网页模板——javascript 在线打字练习"揭示了这个压缩包文件的主要内容，它是一个基于JavaScript技术实现的在线打字练习平台的网页模板。JavaScript，作为全球最广泛使用的编程语言之一，通常用于增强网页...
js练习3：制作课工场论坛发贴.zip
08-27
在本实践项目“js练习3：制作课工场论坛发贴”中，我们将深入探讨JavaScript在Web开发中的应用，特别是如何使用JavaScript实现一个论坛的发帖功能。这个练习旨在提升你的JavaScript编程技能，理解DOM操作、事件处理...
一个简单的员工信息增删改界面
07-31
要自己改一下数据库连接，超简单的界面
javaScript 实现的小的人员管理
11-23
javaScript 实现的小的人员管理 ，可以添加人员删除，实现了简单的表单验证
js中类的添加和删除
qq_44604924的博客
08-22 529
js实现类的添加删除以及如果有就删除，如果没有就添加的功能 类的添加： function addClass(obj,name){ if(!hasClass(obj,name)){ obj.className += " "+name; } } 检测是否拥有该类： function hasClass(obj,name){ var reg = new RegExp("\\b"+name+"\\b");//正则表达式，查看当前元素是否有该类了，\b代表单词的开头和结尾
js代码-添加员工信息
Ada_X25025的博客
06-04 175
比较麻烦的做法：
用js实现增加和删除功能改进
qq_44604924的博客
08-14 521
描述：之前的代码创建节点过于麻烦，而且后添加的超链接要对其重新绑定单击响应事件，现对其进行更进：html代码与之前一样，主要是对js代码进行改进 具体的js代码如下： 用事件委派的形式对单击响应事件进行绑定（绑定给父元素），后面添加的超链接就不用重新进行绑定了，创建结构时，只需要创建tr,其他节点只需要用innerHTML进行添加即可 <script type="text/javascript"> function delA(){ var theTr = this.paren
js:dom查询练习2，增加修改员工信息
weixin_51235620的博客
10-21 324
效果图如下：
js基础笔记学习232删除员工信息3
qq_41632427的博客
11-12 69
前端
js添加删除数据记录
407指导员
11-02 229
js添加删除数据记录 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/javascript" charset=UTF-8"> <title>添加删除记录练习</title> <link rel="stylesheet" type="text/css" href="ex_2_style/
元素的修改、删除员工信息、添加员工、解决XSS注入问题、节点的复制、通过JS修改CSS样式、读取样式、通过属性读取样式——DOM
最新发布
weixin_70320000的博客
11-27 316
元素的修改、删除员工信息、添加员工、解决XSS注入问题、节点的复制、通过JS修改CSS样式、读取样式、通过属性读取样式
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值