DOM实现简单的表格增删操作

最新推荐文章于 2023-01-24 15:30:57 发布
最新推荐文章于 2023-01-24 15:30:57 发布
阅读量516 收藏 6
点赞数 1
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yan101795/article/details/111936659
版权

在这里插入图片描述
代码简单，直接上代码

<!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就是谁
				//获取当前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;
			};

			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() {
					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
                    document.getElementById("empName").value=''
					//获取员工的email和salary
					var email = document.getElementById("email").value;
                    document.getElementById("email").value='';
					var salary = document.getElementById("salary").value;
                    document.getElementById("salary").value=''
					//alert(name+","+email+","+salary);
					/*
					 *  <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");
					//创建四个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 = 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="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">
						Submit
					</button>
					</td>
				</tr>
			</table>

		</div>

	</body>

</html>```

在这里插入css样式：


#total {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: none;
}

li {
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float: left;
}

.inner {
	width: 400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

#employeeTable {
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
}

th,td {
	background-color: white;
}

#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}

#formDiv input {
	width: 100%;
}

.word {
	width: 40px;
}

.inp {
	width: 200px;
}**
雁落红楼
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 实现表格增删改
Qi_JC的博客
12-22 1070
今天来吧前天的坑补一下 利用 jQuer Dom操作实现表格增删改 增删写在了前天，可以点击这个链接去查看 jQuery Dom增删 不想点击链接的话我把全部内容放到最后 做了一点点小修改，大家可以直接看最后的完整代码 查看完整代码 ##话不多说，放后续代码 //====修改--点击修改时--将所有值返回到表单中 { //需要用到事件委派,这就是未来事件 $( "#tbody" ).on( "click","#change",function(){ //获取触发事件按钮的父
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
html dom增删表格,DOM增删操作（创建删除表格）
weixin_39895684的博客
06-20 436
//创建tablefunction createTable(){var tab = document.createElement('table');tab.border = 1;tab.id = 'mtab';var caption = tab.createCaption();caption.innerHTML = 'helle';for(var i = 0;i<5;i++){var tr ...
使用DOM对表格进行增删
weixin_30924087的博客
08-05 284
---恢复内容开始--- 声明本文旨在练习dom 其中可以链接数据 或者使用ajax 实现的我全用的dom因为我在学dom。 一、 表格构建 1 <section id="section_tableUser"> 2 3 <table id="myTable"> 4 <tbody> 5...
JS基础_添加删除记录练习-添加
兴趣是最好的老师
11-22 261
<!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...
DOM节点操作 -- 表单（form标签）完成增删操作示例
樂小伍
09-02 432
表单增加或删除一条数据 【示例】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DOM综合,增删</title> <script> window.onload=function(){ var btn = do...
使用DOM节点的动态添加和删除向表格中插入删除数据
yinghanhanhan的博客
12-09 909
在插入数据按钮的事件处理函数中，使用document对象的getElementById、getElementsByTagName等属性获取输入框的值。在删除超链接的事件处理函数中，获取超链接的父节点td，继续获取父节点tr，在获取父节点table，然后将table节点中的tr节点删除。在页面中添加文本输入框和选项菜单，并提示用户输入，添加插入数据按钮，并添加点击事件。绘制表格，添加四条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件。点击插入数据按钮，将输入框中的数据插入到表格中。
JavaScript Dom 案例-动态表格的添加和删除
最新发布
Ass12454548的博客
01-24 1125
JavaScript Dom 案例-动态表格的添加和删除
DOM复习Day3———添加和删除
lass_huahua的博客
08-19 136
今日复习内容：元素的添加和删除 1.添加：可分为3步： ①创建一个空元素：var a =document.createElement("a") 注意：只能用document调用 ②给新元素添加内容或属性 例如： <a href="www.baidu.com"></a> a.innerHTML="click...
JavaScript—DOM基础操作应用—列表的创建和删除
生活不止眼前的枸杞， 还有蜂蜜和咖啡！
12-27 269
文本： createElement（标签名）—— 创建节点 父级.insertBefore（子级，子级位置）—— 可应用于倒序插入 父级.appendChild（子级）——应用于尾部插入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
使用函数和DOM实现表格的增删查
weixin_44200575的博客
08-24 242
使用函数和DOM实现表格的增删改查使用函数和DOM实现表格的增删改查新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出...
jQuery实现表格的增、删、改操作示例
12-09
本文实例讲述了jQuery实现表格的增、删、改操作。分享给大家供大家参考，具体如下： 这里实现的是在jQuery中通过按钮的形式，对表格进行的一些基本操作，可以实现表格的增删改操作，并实现对鼠标事件监听，实现表格...
DOM表格操作
05-21
实现表格增删 很容易的一个代码介绍做的一个笔记格式的 有详细的代码介绍
学习JS中的DOM节点以及操作
12-09
DOM操作在JS中可以说是非常常见了吧，很多网页的小功能的实现，比如一些元素的增删操作等都可以用JS来实现。那么在DOM中我们需要知道些什么才能完成一些功能的实现呢？今天这篇文章就先简单的带大家入一下JS中DOM...
Javascript——dom小练习：员工增删表格
weixin_46351593的博客
05-09 812
学了这些关于dom的属性以及方法，我们来做一个小练习，巩固一下知识：练习就是制作一个能添加和删除员工信息的表。大致是这样的，在最后会给出完整的代码。 好了我们开始练习： 空白无行为表 由于主要是练习我们Javascript，我们给出HTML和CSS的样式表，样式表还没有任何功能： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>增删改练习</title&
关于UniURLFrame无法正常显示网站页面内容问题的解决
mywindpursue的博客
08-11 1144
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
DOM元素操作之表格的增添和删除
m0_56071898的博客
05-09 623
文章目录前言一、表格的增添1.html代码2.js代码二、表格的删除js代码总结 前言 JavaScript关于DOM元素的操作，本章重点是通过onclick点击事件获取当前节点所在的父节点，以此来删除当前节点 一、表格的增添 1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
使用DOM方法实现表格的增删改查
Cheris_LT的博客
05-18 911
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .tab { margin-top: 150px; border-collapse: collapse; } .tab tr:first-child { background-colo
动态操作表格(DOM操作)
weixin_45846177的博客
11-16 831
动态操作表格(DOM操作) <table>元素是HTML中最复杂的结构之一。要想创建表格，一般都必须涉及表示表格行、单元格、表头等标签。由于涉及标签多，因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。 首先，我们先来看下表格的HTML代码： <table border="1" width="600px"> <tbody> <tr> <td> cell

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值