js-添加删除记录-增加、删除、修改

最新推荐文章于 2023-09-14 13:11:58 发布
最新推荐文章于 2023-09-14 13:11:58 发布
阅读量569 收藏 1
点赞数 1
分类专栏： javascript 文章标签： 1024程序员节 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/127492555
版权

点击超链接：超链接会默认跳转---但是我们不希望跳转可以改成return false

confirm:弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将会作为提示文字出来

/*点击超链接 删除员工信息 --获取所有超链接*/
                var allA = document.getElementsByTagName("a"); //是数组

            //a中添加属性
                    a.href="javascript:;"

    //向a中添加文本
                    a.appendChild(deleteText);

            //创建一个tr 4个td 文本节点
                    var tr = document.createElement("tr");

    //创建a元素
                    var a = document.createElement("a");

        //创建文本节点
                    var nameText = document.createTextNode(name);

<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8">
		<title></title>
		<script>
			//删除的函数
			function delA(){
				//this指向该超链接 
				var tr = this.parentNode.parentNode;
				//获取要删除的元素
				var name = tr.children[0].innerHTML;
				var result = confirm("你确定要删除" + name + "吗?");
				if (result) tr.parentNode.removeChild(tr);
				return false;
			}
			window.onload = function() {
				/*点击超链接 删除员工信息 --获取所有超链接*/
				var allA = document.getElementsByTagName("a"); //是数组
				//为每个超链接绑定函数
				for (i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {
					var name = document.getElementById("empName").value;
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					/*组合成该结构
					<tr>
						<td>Jerry</td>
						<td>jerry@sohu.com</td>
						<td>8000</td>
						<td><a href="deleteEmp?id=002">Delete</a></td>
					</tr>
					*/
					//创建一个tr 4个td 文本节点
					var tr = document.createElement("tr");
					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 deleteText = document.createTextNode("Delete");
					//添加关系
					nametd.appendChild(nameText);
					emailtd.appendChild(emailText);
					salarytd.appendChild(salaryText);
					//a中添加属性
					a.href="javascript:;"
					//向a中添加文本
					a.appendChild(deleteText);
					a.onclick=delA;
					atd.appendChild(a);
					//td到tr中
					tr.appendChild(nametd);
					tr.appendChild(emailtd);
					tr.appendChild(salarytd);
					tr.appendChild(atd);
					//获取table:--浏览器上自动添加了table
					 var employeeTable=document.getElementById("employeeTable");
					 //获取内存employeeTable的tbody节点
					 var tbody=employeeTable.getElementsByTagName("tbody")[0];//f父元素的getElementsByTagName
					 tbody.appendChild(tr);
					
				}



			}
		</script>
		<style>
			#employeeTable {
				border-collapse: collapse;/合并边框 width: 307px;
				margin: 40px auto;
			}

			#employeeTable th {
				border: 1px solid black;
				width: 57px;
			}

			#employeeTable td {
				border: 1px solid black;
			}

			div {
				border: 1px black solid;
				width: 250px;
				padding: 10px;
				margin: 40px auto;
			}
		</style>
	</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="deleteEmp?id=1">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>
		</table>
		<div>
			<strong>添加新员工</strong>
			<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>

 法二：使用innerHTML方法 直接合成节点

					/*组合成该结构
					<tr>
						<td>Jerry</td>
						<td>jerry@sohu.com</td>
						<td>8000</td>
						<td><a href="deleteEmp?id=002">Delete</a></td>
					</tr>
					*/
					//创建一个tr 4个td 文本节点
					var tr = document.createElement("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=delA;
					//获取table:--浏览器上自动添加了table
					var employeeTable = document.getElementById("employeeTable");
					//获取内存employeeTable的tbody节点
					var tbody = employeeTable.getElementsByTagName("tbody")[0]; //f父元素的getElementsByTagName
					tbody.appendChild(tr);
<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8">
		<title></title>
		<script>
			//删除的函数
			function delA() {
				//this指向该超链接 
				var tr = this.parentNode.parentNode;
				//获取要删除的元素
				var name = tr.children[0].innerHTML;
				var result = confirm("你确定要删除" + name + "吗?");
				if (result) tr.parentNode.removeChild(tr);
				return false;
			}
			window.onload = function() {
				/*点击超链接 删除员工信息 --获取所有超链接*/
				var allA = document.getElementsByTagName("a"); //是数组
				//为每个超链接绑定函数
				for (i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {
					var name = document.getElementById("empName").value;
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					/*组合成该结构
					<tr>
						<td>Jerry</td>
						<td>jerry@sohu.com</td>
						<td>8000</td>
						<td><a href="deleteEmp?id=002">Delete</a></td>
					</tr>
					*/
					//创建一个tr 4个td 文本节点
					var tr = document.createElement("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=delA;
					//获取table:--浏览器上自动添加了table
					var employeeTable = document.getElementById("employeeTable");
					//获取内存employeeTable的tbody节点
					var tbody = employeeTable.getElementsByTagName("tbody")[0]; //f父元素的getElementsByTagName
					tbody.appendChild(tr);

				}



			}
		</script>
		<style>
			#employeeTable {
				border-collapse: collapse;/合并边框 width: 307px;
				margin: 40px auto;
			}

			#employeeTable th {
				border: 1px solid black;
				width: 57px;
			}

			#employeeTable td {
				border: 1px solid black;
			}

			div {
				border: 1px black solid;
				width: 250px;
				padding: 10px;
				margin: 40px auto;
			}
		</style>
	</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="deleteEmp?id=1">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>
		</table>
		<div>
			<strong>添加新员工</strong>
			<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>
¡Venceremo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html js清除历史,javascript – JS – window.history – 删除一个状态
weixin_34274163的博客
06-19 6086
你现在可能已经移动了,但据我所知,没有办法删除历史记录(或状态).我一直在研究的一个选择是自己在JavaScript中处理历史,并使用window.history对象作为载体.基本上,当页面首次加载时,您将创建自定义历史记录对象(我们将在此处使用数组,但是使用任何对您的情况有意义),然后执行初始的pushState.我将传递您的自定义历史记录对象作为状态对象,因为它可能会派上用场,如果你还需要处理...
JS点击事件删除单行数据
living_ren的博客
12-18 7754
今天学得的新知识点：采用js方式实现页面跳转并传递get参数实现数据库的单行删除          用户表              用户信息表                      ID用户名密码性别电话邮箱部门简介操作                  {*此处是smarty模板所接收到的值使用foreach遍历出来数据库的内容*}         {
JS删除上一条浏览器历史记录的方法（登录回退）
最新发布
chenhongcancan的博客
09-14 2121
history不支持删除历史记录的方法，当从当前页面跳转到下一个页面的时候可以用。方法，用新的文档替换当前文档就相当于删除了当前页面的历史记录。
原生js实现 搜索框 点击搜索 清空历史记录
tangtanglinli的博客
03-11 1142
原生js实现 搜索框 点击搜索 清空历史记录
JS实现表单增加、删除功能，相关代码示范与解析
weixin_35749796的博客
02-17 260
使用JavaScript实现表单增加和删除功能，可以参考以下示例代码：// 增加表单 function addForm(){ var form = document.createElement("form"); form.setAttribute("id", "form"); form.setAttribute("name", "form"); form.inner...
js动态添加表格记录
qq_43679917的博客
04-05 133
html表格部分 js函数部分
计算机软件-商业源码-238 添加删除修改记录.zip
05-22
"238 添加删除修改记录.zip"这个压缩包文件，从其标题和描述来看，很可能是某种商业软件项目的一部分，涉及到添加、删除和修改记录的功能。这些功能是数据管理软件或数据库应用的常见操作，对理解软件如何处理数据至...
javascript经典特效---ASP删除记录的方法.rar
12-25
在ASP（Active Server Pages）中，我们通常使用服务器端的语言如VBScript或JScript来处理数据库操作，包括添加、修改、删除记录等。然而，由于题目提到的是"javascript经典特效"，我们可以理解为在用户界面层面上，...
layui添加修改删除
05-13
在“layui添加修改删除”这个主题中，我们将深入探讨如何使用layui实现数据表格中的基本操作：添加、修改和删除。 一、layui数据表格（layui table） layui的数据表格组件是其核心功能之一，它可以方便地展示复杂的...
JavaScript-使用MongoDBExpressjsReactjs和Nodejs的简单记录系统
08-09
在本项目中，Socket.io使得记录系统的CRUD操作能够实现实时更新，当一个用户执行了添加、修改或删除操作时，其他用户可以立即看到这些变化，增强了用户体验。 6. **CSS相关**：虽然标签中提到的是"JavaScript开发-...
javascript利用json操作浏览历史记录
04-02
NULL 博文链接：https://alandeng2012.iteye.com/blog/1441353
js 读取 添加 删除 修改 Access数据库 完整例子
03-30
文件名暗示了具体的示例代码可能包括了以上所述的各种操作，例如`Access增加操作.html`可能展示了如何添加数据，`Access删除操作.html`展示了删除数据的步骤，`Access修改操作.html`涉及更新记录，而`远程连接Access...
4种方法让SpringMVC接收多个对象
热门推荐
一个情绪猿的脖克...
07-10 17万+
问题背景： 我要在一个表单里同时一次性提交多名乘客的个人信息到SpringMVC，前端HTML和SpringMVC Controller里该如何处理？ 第1种方法：表单提交，以字段数组接收； 第2种方法：表单提交，以BeanListModel接收； 第3种方法：将Json对象序列化成Json字符串提交，以List接收； 第4种方法：将表单对象序列化成Json字符串提交，以List接收； 第4种方
JS添加删除记录练习
weixin_43571052的博客
03-07 416
效果图 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
跳转到新页面并清除当前页面的history记录
Mr.Tang的博客
03-22 2万+
History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录，通过history方法触发前进后退 通常使用的方式： window.location.href='index.html' // 或者 window.location.replace('index.html') 使用场景：比如别人访问你得网站 不想回退的时候一步一步回，就需要避免访问你得页面的时候产生history历史记录。 解决办法：清除历史记录 window.history.replaceState() 对当前history
js添加删除行操作
人生所向，皆是美好
01-29 819
今天在动态的实现一个试题修改工能时，学习到了一些动态处理页面元素的技能，在这里记录总结。 效果如图： 本页面，答案项部分代码如下：<s:if test='%{qsbknewQuestionPage.qsbkQuestion.questionType =="1" || qsbknewQuestionPage.qsbkQuestion.questionType =="2"}'>
js添加、删除、修改行
___ 、努ㄌ
08-30 1507
编号 标题 摘要 作者 类别
JS实现增、删、改功能
dengfengling999的博客
01-14 687
创建一个“广州”节点，添加到#city下 将“广州”节点插入到#bj前面 使用广州节点替换#bj节点 删除#bj节点 读取#city内的HTML 设置#bj内的HTML 创建一个“广州”节点，添加到#city下用法2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte
原生js实现表格增删查改
qq_45989170的博客
09-19 2599
js实现表格增删查改 HTML部分 <div class="box"> <head> <h2>表格管理系统</h2> <div class="s"> <label>姓名：</label><input type="text" class="searchUname"><button class="search"&g
利用JavaScript实现淄博烧烤季点餐页面，点餐按钮事件实现弹出对话框页面，确定后添加点餐记录页面，能够删除点餐记录，点击删除按钮弹出对话框，确定后删除记录，取消后没有删除记录，能够修改点餐记录
08-03
可以创建一个记录表格，每次点餐时向表格中添加一行数据，并为每行数据添加删除和修改按钮。点餐记录数据可以使用JavaScript数组来保存。 再次，在删除点餐记录功能中，可以通过点击删除按钮触发事件，弹出确认...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值