js--dom实现增删改操作

最新推荐文章于 2022-02-10 17:22:49 发布
最新推荐文章于 2022-02-10 17:22:49 发布
阅读量193 收藏
点赞数
分类专栏： 前端学科体系
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42681787/article/details/104521326
版权

1.dom内置方法实现增删改

<!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;
			};
		}
		
	};

	
</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>

2.删除练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			legend{
				text-align: center;
			}
			table{
				margin: 20px auto;
				text-align: center;
				width: 20%;
				
			}
			.del{
				color: red;
			}
			a{
				text-decoration:none ;
			}
		</style>
	</head>
	<body>
		<fieldset id="">
			<legend >信息展示</legend>
			<table border="1px" cellspacing="1px" cellpadding="1px">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>工资</th>
				<th class="del">操作</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>22</td>
				<td>5000</td>
				<th><a href="">删除</a></th>
			</tr>
			<tr>
				<td>李四</td>
				<td>35</td>
				<td>15000</td>
				<th><a href="">删除</a></th>
			</tr>
			<tr>
				<td>王五</td>
				<td>25</td>
				<td>10000</td>
				<th><a href="">删除</a></th>
			</tr>
		</table>
		</fieldset>
		
	</body>
	<script type="text/javascript">
		var allA=document.getElementsByTagName("a");
		for(var j=0;j<allA.length;j++){
			allA[j].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;
			}
		}
	</script>
</html>

 

城南皮卡丘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
js dom节点操作的增加和删除
qq_48439911的博客
03-27 4347
一、增加元素节点 我们想要增加一个节点，节点不能凭空产生，我们需要先创建一个节点，创建一个元素节点的操作很简单。例如我们想要在一个 ul 的标签添加一个 li 标签。 （1）创建一个节点操作 var li=document.createElement('li'); （2）添加节点操作 添加节点有两种方式： 第一种是 node.appendChild(node) node 代表的是父级，child 代表的是子级 ，需要注意的是，它是从后面追加元素，类似于数组中的push var ul=document.qu
js基础——DOM增删改练习
jwz934738949的博客
09-02 539
confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM增删改练习</title&gt...
DOM的增删改实例
dweblover的博客
12-01 1486
1.给出如下图，请利用DOM的增删改完成员工信息的删除以及添加 2.具体代码如下： &amp;amp;amp;amp;lt;!doctype html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;meta charset=&amp
5-25 js DOM的增删改
某风吾起的博客
05-25 214
文章目录二、DOM对象什么是DOM节点节点事件整个页面加载完成之后在执行dom的操作。 二、DOM对象 什么是DOM DOM ,全称Document Object Model文档对象模型，实现了以面向对象的形式来操作网页，方便简单。 JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 文档 doucument 文档表示的就是整个的HTML网页文档 对象 o...
DOM增删操作（创建删除表格）
u011927449的博客
07-15 364
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> //创建table function createTable(){ var tab = document.createElement('table'); tab.border = 1; tab.id = 'mtab'; var cap
使用js dom和jquery分别实现简单增删改
10-25
今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，两者对比可以看出jquery的强大
js中script的上下放置区别，Dom的增删改创建操作实例分析
10-15
主要介绍了js中script的上下放置区别，Dom的增删改创建操作,结合实例形式分析了JavaScript基本dom事件、script在head和body中放置的区别、以及Dom的增删改创建等相关操作技巧,需要的朋友可以参考下
js中DOM的增删改查
weixin_43735593的博客
11-23 1189
js中DOM的增删改查 常见的Dom、html的操作不外乎查找节点、增加节点（尤其是动态渲染数据的时候）、修改节点内容、删除节点。 查找节点 1、一般就是document.getElement(s)系列，主要有document.getElementById(‘id’)、document.getElementsByClassName(‘classname’)、document.getElements...
js基础——DOM增删改
jwz934738949的博客
09-01 123
1、document.createElement()：创建元素节点对象，它需要一个标签作为参数，并且返回创建好的对象； 2、document.createTextNode()：创建文本节点对象，它需要一个文本内容作为参数，并且返回创建好的对象； 3、appendChild()：向一个父节点添加一个子节点。 用法：父节点.appendChild(子节点)； 4、insertBefore()：...
jsDOM增删改查操作
秋雨梧桐
07-18 5366
/*              * dom节点增删改查              * */
js增删dom控件 js的调试 断点与log
靓靓软件工作室
12-04 120
以下说的是原生js不是jquery。 找到锚点元素   元素属性操作，事件操作 转换锚点（在锚点元素内外查找元素（查） 锚点内外增删元素（增，删，改）   element属性与方法可以遍历，增删改整个dom结构，element参考如下。 http://www.w3school.com.cn/jsref/dom_obj_all.asp   调试（大多浏览器支持js的调试，断点单步...
JavaScript之DOM增删改查(重点)
程序猿小九九的博客
02-10 3503
DOM操作：事件、增、删、改查
JS基础之DOM操作增删改查的操作
lanseguhui的博客
07-16 1226
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .wrap{ width: 500px; height:
JS删除DOM元素的两种方法
热门推荐
小龙在线
10-13 15万+
删除子节点 var box=document.getElementById("box"); box.parentNode.removeChild(box); 删除自身 var box=document.getElementById("box"); box.removeNode(true); 参考：https://blog.csdn.net/staywithc/article/details/3...
JS的基本DOM操作（增删改查）
分享，让视野更宽阔
06-29 4460
### 查找 ### （就是获取元素） (1)，标准DOM API    document.getElementById(id); document.getElementsByTagName(name); document.getElementsByName(name); document.getElementsByClassName(names)...
操作dom实现增删改
dreamy_wx的博客
07-26 200
HTML代码： <h1>操作dom实现增删改</h1> <div class="content"> <div> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> .
前端---js（自学笔记21)（添加删除记录练习，超链接索引问题）
ABU_MOlI_ITUI的博客
08-10 3112
添加删除记录------删除： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>添加删除记录练习</title> <link rel="stylesheet" type="text/css" href="css/delete.css"/> &
DOM对HTML元素的增删改操作
lx__angel的博客
12-08 263
DOM创建节点的方法 document.createElement(Tag)，Tag必须是合法的HTML元素 DOM复制节点的方法 节点.cloneNode(boolean deep),当deep为true时，表示复制当前节点以及当前节点全部后代节点。为false，只复制当前节点。 00 function create(){ var
antd-mobild+react-router-dom实现 tabs
最新发布
07-13
你可以使用antd-mobile和react-router-dom来实现tabs功能。首先，你需要安装antd-mobile和react-router-dom依赖包。 ```shell npm install antd-mobile react-router-dom ``` 接下来，你可以创建一个Tabs组件，并...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

城南皮卡丘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值