【小案例】增加删除记录

最新推荐文章于 2019-11-01 15:20:30 发布

希冀miracle

最新推荐文章于 2019-11-01 15:20:30 发布

阅读量162

点赞数

分类专栏： web前端相关

本文链接：https://blog.csdn.net/weixin_39843945/article/details/89470306

版权

web前端相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.图片

在这里插入图片描述
2.HTML代码

<body>
	<table border="1" id="tab">
	      <tr>
	        <th >name</th>
	        <th>age</th>
	        <th>job</th>
	      </tr>
	      <tr>
	        <td >Jack</td>
	        <td>30</td>
	        <td>软件测试</td>
	        <td><a href="1">删除</a></td>
	      </tr>
	
	      <tr>
	        <td >Jerry</td>
	        <td>35</td>
	        <td>前端开发</td>
	        <td><a href="2">删除</a></td>
	      </tr>
	</table>
	<br/>
	<table border="1"id="tb2">
		<tr>
	    	<th>添加用户</th>
	    </tr>
	  <tr>
	    <td>name:<input type="text" id="name"></td>
	  </tr>
	  <tr>
	    <td >age:&nbsp;&nbsp;&nbsp;<input type="text" id="age"></td>
	  </tr>
	  <tr>
	    <td>job:&nbsp;&nbsp;&nbsp;<input type="text" id="job"></td>
	  </tr>
	  <tr>
	  	<td><button id="addBtn">submit</button></td>
	  </tr>
	</table>
</body>

3.CSS

<style type="text/css">
	table{
		text-align: center;
		width: 300px;
		height: 100px;
		border-style: solid black;
		background-color:#00ff99;
	}
</style>

4.JS代码

<script type="text/javascript">
	window.function(){
		//删除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;//或者在a标签处<a href="javascript:;"></a>
	 	
	 }
	 
	 
	 
	 
	/* 
		点击超链接以后，删除一个员工的信息
	 */
	 
	 //获取所有的超链接
	 var allA=document.getElementsByTagName("a");
	 
	 //为每个超链接都绑定一个单击响应函数
	 for(var i=0;i<allA.length;i++){
	 	allA[i].delA;
	 	}
	 
	 
	 
	 
	 /* 
	 	添加员工的功能
	 		点击按钮以后，将员工的信息添加到表格中
	  */
	  
	  //为提交按钮绑定一个单击响应函数
	  var addBtn=document.getElementById("addBtn");
	  addBtn.function(){
	  	//获取用户填写的信息
	  	var name=document.getElementById("name").value;
	  	var age=document.getElementById("age").value;
	  	var job=document.getElementById("job").value;
	  	/* 
	  	  <tr>
	        <td>name1</td>
	        <td>1</td>
	        <td>job1</td>
	        <td><a href="1">删除</a></td>
	      </tr>
	      	将需要获取到的信心保存在tr中
	  	 */
	  	 //创建一个tr
	  	 var tr=document.createElement("tr");
	  	 
	  	 //创建四个td
	  	 var nameTd=document.createElement("td");
	  	 var ageTd=document.createElement("td");
	  	 var jobTd=document.createElement("td");
	  	 var aTd=document.createElement("td");
	  	 
	  	 //创建一个a元素
	  	 var a=document.createElement("a");
	  	 
	  	 //创建文本节点
	  	 var nameTxt=document.createTextNode(name);
	  	 var ageTxt=document.createTextNode(age);
	  	 var jobTxt=document.createTextNode(job);
	  	 var delTxt=document.createTextNode("删除");
	  	 
	  	 //将文本添加到td
	  	 nameTd.appendChild(nameTxt);
	  	 ageTd.appendChild(ageTxt);
	  	 jobTd.appendChild(jobTxt);
	  	 //向a中添加href属性
	  	 a.href="javascript:;";
	  	 //向a中添加文本
	  	 a.appendChild(delTxt);
	  	 //将a添加到td中
	  	 aTd.appendChild(a);
	  	 
	  	 //将td添加到tr中
	  	 tr.appendChild(nameTd);
	  	 tr.appendChild(ageTd);
	  	 tr.appendChild(jobTd);
	  	 tr.appendChild(aTd);
	  	 
	  	 //获取table
	  	 var tab=document.getElementById("tab");
	  	 //获取tab中的tbody
	  	 var tbody=tab.getElementsByTagName("tbody")[0];
	  	 //将tr添加到tbody中
	  	 tbody.appendChild(tr)
	  	 
	  	 //为新添加的a再绑定一次响应函数
	  	 a.delA;
	  }; 
 };	 	
</script>

4.简化版

//删除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;//或者在a标签处<a href="javascript:;"></a>
	 	
	 }
window.function(){
		
	 
	 
	 
	 
	/* 
		点击超链接以后，删除一个员工的信息
	 */
	 
	 //获取所有的超链接
	 var allA=document.getElementsByTagName("a");
	 
	 //为每个超链接都绑定一个单击响应函数
	 for(var i=0;i<allA.length;i++){
	 	allA[i].delA;
	 	}
	 
	 
	 
	 
	 /* 
	 	添加员工的功能
	 		点击按钮以后，将员工的信息添加到表格中
	  */
	  
	  //为提交按钮绑定一个单击响应函数
	  var addBtn=document.getElementById("addBtn");
	  addBtn.function(){
	  	//获取用户填写的信息
	  	var name=document.getElementById("name").value;
	  	var age=document.getElementById("age").value;
	  	var job=document.getElementById("job").value;
	  	/* 
	  	  <tr>
	        <td>name1</td>
	        <td>1</td>
	        <td>job1</td>
	        <td><a href="1">删除</a></td>
	      </tr>
	      	将需要获取到的信心保存在tr中
	  	 */
	  	 //创建一个tr
	  	 var tr=document.createElement("tr");
	  	
	  	//设置tr中的内容
	  	tr.innerHTML="<td>"+name+"</td>"+
	  				"<td>"+age+"</td>"+
	  				"<td>"+job+"</td>"+
	  				"<td><a href='javascript:;'>删除</a></td>";
	  	//获取刚刚添加的a元素，并为其绑定单击响应函数
	  	var a=tr.getElementsByTagName("a")[0];
	  	a.delA;
	  	
	  	 //获取table
	  	 var tab=document.getElementById("tab");
	  	 //获取tab中的tbody
	  	 var tbody=tab.getElementsByTagName("tbody")[0];
	  	 //将tr添加到tbody中
	  	 tbody.appendChild(tr)
	  	 /* tbody.innerHTML+="<tr>"+"<td>"+name+"</td>"+
	  				"<td>"+age+"</td>"+
	  				"<td>"+job+"</td>"+
	  				"<td><a href='javascript:;'>删除</a></td>"
	  	 +"</tr>"; */
	  	 
	  	 //为新添加的a再绑定一次响应函数
	  	 a.delA;
	  }; 
 };

希冀miracle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【小案例】增加删除记录

1.图片2.HTML代码<body> <table border="1" id="tab"> <tr> <th >name</th> <th>age</th> <th>job</th> </tr&...
复制链接

扫一扫

专栏目录