103-----JS基础-----添加删除记录-删除

最新推荐文章于 2023-04-03 21:45:25 发布
最新推荐文章于 2023-04-03 21:45:25 发布
阅读量94 收藏
点赞数
分类专栏： JavaScript学习笔记 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44517656/article/details/121447141
版权

一 代码

很简单，看一下即可。

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

	
</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>
Mango酱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS基础_添加删除记录练习-删除
兴趣是最好的老师
11-22 255
<!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="styles...
Linux——K8s集群资源
weixin_45191791的博客
11-04 1399
Yaml文件解释 apiVersion：api版本信息 kind：资源对象的类别 metadata：元数据 名称字段必写。 spec：用户期望的状态。 labels：定义pod的标签 status：资源现在处于什么样的状态 replicas：定义副本数量 selector：标签选择器，定义匹配pod的标签 template：pod的模板定义 containers：容器定义 添加apiVersion库 在yaml文件中command指令下添加 [root@master yaml]# vim /etc/ku
td里面的内容加了br不起作用_用最详细直白的语言讲明白静态时序分析的基础内容...
weixin_39611510的博客
11-27 672
建立时间和保持时间是每个数字IC学生入门的基本功，然而网上已有的资料要么直接写公式，要么直接丢出整个波形图让学生自己体会，没有将波形图分解开来一步步讲述，逐渐推导出公式的资料，我在此抛砖引玉一下。故事是这样的，有一个拄着拐杖的数据老大爷，他要经过一个城门楼子，再爬过一个大山，去到另一个城门楼子。而城门楼子的大门不是随便开的，要分别等到不同时钟的上升沿信号到来才能打开一小段时间。上图也就相当于下面这...
HTML、CSS、JavaScript实现表格行信息的删除添加
Code6E的博客
02-12 585
来自李立超老师的练习，这个是自己写的事件委托优化后的版本，原视频网址https://www.bilibili.com/video/BV1mG411h7aD?p=147&vd_source=efd4241fdf9061e2f928f58914d04b92
点击删除按钮删除一行数据html,JS ：点击按钮table增加一行，删除一行
weixin_31281003的博客
06-07 4436
String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>update_data.jsp//给table增加一行function addTableRow() {...
mongoose-softdelete：软删除MongoDB文档
02-04
添加deletedAt字段以记录删除文档的时间。 此外，它从原始代码中消除了很多开销，并且不使用Coffeescript。 还可以检出 。 执照 该插件已获得MIT许可，并可以在LICENSE文件中查看。 安装 使用安装 npm install ...
BPMN-JS.rar
04-25
BPMN-JS是一个强大的JavaScript库，专门用于在Web应用中渲染和交互业务流程建模语言（Business Process Model and Notation，简称BPMN）。它允许开发者创建、编辑和展示BPMN图表，使得业务流程的可视化设计变得更加...
Edabit-Challenges-[removed]来自 Edabit 的 Javascript 挑战
05-30
8. **DOM 操作**：虽然 Edabit 平台主要关注纯 JavaScript 逻辑，但部分挑战可能涉及与 HTML 的交互，如选择元素、修改属性、添加或删除节点。 9. **错误处理**：掌握如何使用 `try...catch` 语句进行异常处理，...
JavaScript-使用MongoDBExpressjsReactjs和Nodejs的简单记录系统
08-09
在本项目中，Socket.io使得记录系统的CRUD操作能够实现实时更新，当一个用户执行了添加、修改或删除操作时，其他用户可以立即看到这些变化，增强了用户体验。 6. **CSS相关**：虽然标签中提到的是"JavaScript开发-...
商业编程-源码-家家留言本 v1.0.zip
06-23
通过分析《家家留言本 v1.0》的源码，开发者可以学习到Web应用开发的基础知识，包括前后端交互、数据库设计、用户认证、数据安全等方面。对于初学者，这是一个很好的实战项目，有助于提升编程技能和理解商业软件开发...
html表单添加删除,【JavaScript】表单增加和删除练习
weixin_39770165的博客
06-24 253
表单html部分姓名邮箱工资小明xiaoming@qq.com5000删除小红xiaohong@qq.com8000删除李华lihua@qq.com6000删除添加新员工名字：邮箱：工资：提交调用函数del();点击删除时，删除对应的表格function del(){//获取所有超链接var allA = document.getElementsByTagName("a");//为每个超链接绑定...
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
han_han__的博客
09-11 2632
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
JS如何在表单中点击删除按钮可以删除一行
weixin_70747888的博客
04-03 2706
【代码】JS如何在表单中点击删除按钮可以删除一行。
JS添加和删除表格行
weixin_30882895的博客
09-06 145
<!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...
JS—添加删除记录练习
一介白衣入江南
06-01 1901
<!doctype html> <html> <head> <meta charset="utf-8"> <title>添加删除记录练习</title> <style> .employeeTable { border:1px solid red; } </style> /* 1.c...
删除条件提交页面
h14525544的博客
10-18 214
删除条件提交页面                          请选择删除记录条件                                           姓名：                           性别：男                                       女                           体重范围
JS中的添加删除记录练习--删除（包含思路）
Fantasc的博客
08-05 241
思路： 这个练习是要通过超链接来删除对应的用户信息，既然是要通过超链接来删除数据，那么就要先获取a元素。通过getElementByTagName来获取，返回的是封装a元素的数组，对这个数组进行遍历，分别为每一个a元素绑定单击响应函数。 注意：点击超链接会跳转页面，可以在末尾return false来取消页面的跳转，或者在a标签中加入href="javascript:;"来取消点击超链接时的页面跳转。 要分别获取对应a元素的tr祖先元素，就得知道当前的a标签对应的数据，通过this来指明当前的函
添加和删除记录——JS
mantou_riji的博客
04-07 329
效果： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <script> // s删除的响应函数 function deleA(){ // 获取tr var tr = this.parentNode.parentNode; var n
JS添加删除记录练习
weixin_43571052的博客
03-07 419
效果图 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
uni-app实现搜索历史记录和去重、缓存
最新发布
05-24
要实现搜索历史记录和去重、缓存，可以使用uni-app提供的本地存储功能。 首先，需要定义一个对象用来保存搜索历史记录，例如： ```javascript const history = { list: [], // 保存搜索历史的数组 maxLen: 10, // 最大历史记录数 add(keyword) { // 添加历史记录的方法 const index = this.list.indexOf(keyword) if (index !== -1) { this.list.splice(index, 1) // 如果已存在该记录则先删除 } this.list.unshift(keyword) // 添加到数组头部 if (this.list.length > this.maxLen) { this.list.pop() // 如果超过最大长度则删除末尾记录 } }, clear() { // 清空历史记录的方法 this.list = [] } } ``` 然后，可以在搜索框的输入事件中调用 add 方法，将搜索关键字添加到历史记录中。同时，在页面加载时可以从本地存储中读取历史记录，例如： ```javascript onLoad() { const historyList = uni.getStorageSync('history') || [] // 从本地存储中读取历史记录 history.list = historyList // 覆盖 history 对象的 list 属性 } ``` 为了防止用户重复添加同一条历史记录，可以在 add 方法中先通过 indexOf 方法判断该记录是否已存在，如果存在则先删除原有记录。 ```javascript add(keyword) { // 添加历史记录的方法 const index = this.list.indexOf(keyword) if (index !== -1) { this.list.splice(index, 1) // 如果已存在该记录则先删除 } this.list.unshift(keyword) // 添加到数组头部 if (this.list.length > this.maxLen) { this.list.pop() // 如果超过最大长度则删除末尾记录 } } ``` 最后，为了实现历史记录的缓存功能，可以在 add 和 clear 方法中调用 uni.setStorageSync 方法将历史记录保存到本地存储中，例如： ```javascript add(keyword) { // 添加历史记录的方法 // ... uni.setStorageSync('history', this.list) // 将历史记录保存到本地存储中 }, clear() { // 清空历史记录的方法 this.list = [] uni.setStorageSync('history', this.list) // 将清空后的历史记录保存到本地存储中 } ``` 这样就可以实现搜索历史记录和去重、缓存的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值