用js实现增加和删除功能改进

逃离我推掉我的手 2022-11-27 10:20 197阅读 0赞

描述：之前的代码创建节点过于麻烦，而且后添加的超链接要对其重新绑定单击响应事件，现对其进行更进：html代码与之前一样，主要是对js代码进行改进  
具体的js代码如下：  
用事件委派的形式对单击响应事件进行绑定（绑定给父元素），后面添加的超链接就不用重新进行绑定了，创建结构时，只需要创建tr,其他节点只需要用innerHTML进行添加即可

<script type="text/javascript">
    			function delA(){
    
    						var theTr = this.parentNode.parentNode;
    					//  var thename = thrTr.Children[0].innerHTML	
    						var thename = theTr.getElementsByTagName("td")[0].innerHTML; 
    					var flag = confirm("确定要删除"+thename+"吗？");
    				 
    					
    					if(flag){
    						theTr.parentNode.removeChild(theTr);
    					}
    
    			}
    			//事件的委派，将监听事件绑定给父元素，当点击子元素时进行相应
    			window.onload = function(){
    				//绑定事件监听
    				//var theTbody = document.getElementsByTagName("tbody");
    				var theTbody = document.getElementById("tbody1");
    				theTbody.onclick = function(){
    					var aAll = document.getElementsByTagName("a");
    				for(var i=0;i<aAll.length;i++){
    					aAll[i].onclick = delA;
    				}
    				}
    
    				//添加功能，点击按钮以后，添加元素到表格中
    				var button1 = document.getElementById("button1");
    				button1.onclick = function(){
    				var name = document.getElementsByTagName("input")[0].value;
    				var email = document.getElementsByTagName("input")[1].value;
    				var salary = document.getElementsByTagName("input")[2].value;
    				//创建表单结构
    				var tr = document.createElement("tr");
    				tr.innerHTML = "<td>"+name+"</td>"+"<td>"+email+"</td>"
    				+"<td>"+salary+"</td>"+"<td><a href = 'javascript:;'>Delete</a></td>";
    
    					var theTbody = document.getElementById("tbody1");
    					theTbody.appendChild(tr);
    					//return false;
    				};
    			};
    		</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS学习笔记-列表的删除和增加

列表的删除和增加 1.HTML文件我们在HTML中写入一个简单的学生信息表，这个表并没有用太多的样式，但是不影响结果。 <!DOCTYPE html>

雨点打透心脏的1/2处/ 2023年06月20日 09:29/ 0 赞/ 14 阅读

相关 node JS 中 sequelize 结合 mysql 实现增加、查询、修改和删除

一、node JS 中 sequelize 结合 mysql 实现增加、查询、修改和删除 1. `sequelize` 结合 `mysql` 实现增加，`create.

不念不忘少年蓝@/ 2022年12月28日 06:22/ 0 赞/ 557 阅读

相关 jQuery实现增加和删除功能

代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

以你之姓@/ 2022年12月02日 12:30/ 0 赞/ 213 阅读

相关用js实现增加和删除功能改进

描述：之前的代码创建节点过于麻烦，而且后添加的超链接要对其重新绑定单击响应事件，现对其进行更进：html代码与之前一样，主要是对js代码进行改进具体的js代码如下：

逃离我推掉我的手/ 2022年11月27日 10:20/ 0 赞/ 198 阅读

相关用js实现增加和删除功能

描述：用js实现增加和删除功能，点击按钮进行增加，点击delete进行删除具体界面如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5na

缺乏、安全感/ 2022年11月27日 10:18/ 0 赞/ 229 阅读

相关 js动态增加行删除行

//动态增加行 function addRow(tab){ var title = ""; var table = document.get

叁歲伎倆/ 2022年08月07日 05:53/ 0 赞/ 211 阅读

相关 js增加class或者删除class

1.比较传统的方法 var classVal = document.getElementById("id").getAttribute("class"); //

你的名字/ 2022年06月03日 01:11/ 0 赞/ 471 阅读

相关 JAVASCRIPT 实现增加和删除Select元素

<script type="text/javascript"> //清除选择选项 function cleanValue(cleanSelect

ゝ一纸荒年。/ 2022年05月21日 09:17/ 0 赞/ 221 阅读

相关 JS实现简单的表单增加删除功能

html部分： <div> <label for="">编号：</label><input type="text" id="txt1"> <lab

亦凉/ 2022年02月22日 18:48/ 0 赞/ 526 阅读

相关 Springboot+mybatis实现web的简单增加，删除和查找功能

前言：利用springBoot+Mybatis创建web，实现简单的增加，删除和查询功能。 1、在IDEA中创建项目 ![watermark_type_ZmFuZ

绝地灬酷狼/ 2021年12月21日 05:41/ 0 赞/ 447 阅读