JavaScript添加删除表单

最新推荐文章于 2023-03-07 11:48:55 发布

cola。。

最新推荐文章于 2023-03-07 11:48:55 发布

阅读量172

点赞数

文章标签： javascript html5 dom

本文链接：https://blog.csdn.net/weixin_47438768/article/details/116401049

版权

要点：

获取表单中应标签对其或其属性进行操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload=function(){
				/* 超链接删除员工 */
				let alla=document.getElementsByTagName("a");
				
				function dela(){
					//let tr=this.parentNode.parentNode;
					let mz=this.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML
					let qr=confirm("You sure delete the"+mz+"?");//弹出有取消和确认按钮的提示框
					if(qr){ 
					this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
					}
					/* 点击超链接会跳转404
					 在函数末尾return false取消跳转*/
					 return false;
				}
				
				for (var i = 0; i < alla.length; i++) {
					alla[i].onclick=dela;
				}
				
				let sub=document.getElementById("submit");
				sub.onclick=function(){
					let tab=document.getElementById("tab");//获取table表单
					let newman=document.getElementsByTagName("input");//获取input‘数组’
					let tbody=tab.getElementsByTagName("tbody")[0];//获取tbody
					let tr=document.createElement("tr");//创建空tr
					let td=document.createElement("td");//创建空td
					let a=document.createElement("a");//创建a标签
					let ad=document.createTextNode("delete");//创建delete文本				
					for (var i = 0; i <=2; i++) {//将获取到的input数组里面的value传给空的tr，就是input中的输入
					tr.innerHTML+="<td>"+newman[i].value+"</td>";
					}					
					a.onclick=dela;	//a调用删除函数
					a.href="javascript:;";//a加href不然点不起
					a.appendChild(ad);//
					tr.appendChild(td);
					td.appendChild(a)
					tbody.appendChild(tr);
					;
				}
				
				
				
			};
		</script>
	</head>
	<body>
		<div style="margin: 0 auto; align-items: center;text-align: center; width:218px;height: auto;" id="d1">
		<table id="tab" border="" cellspacing="" cellpadding="">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
			</tr>
			<tr id="per1">
				<td id="name">大司</td>
				<td id="eml">dasima@163.com</td>
				<td id="sal">5000$</td>
				<td id="del"><a href="delete">delete</a></td>
			</tr>
			<tr id="per1">
				<td id="name">小C</td>
				<td id="eml">yuxiaoC@163.com</td>
				<td id="sal">5000$</td>
				<td id="del"><a href="delete">delete</a></td>
			</tr>
			
			
		</table>
		
		
		</div>
		<div id="d2"style="width: 300px;height: auto;margin: 0 auto;background-color: bisque;">
			<h2>添加新员工</h2>
			
			Name<input type="text" name="" id="name" value="" /><br>
			Email <input type="email" name="" id="email" value="" /><br>
			Salary<input type="text" name="" id="salary" value="" /><br>
			<button type="button"id="submit"style="text-align: center;margin: 0 autos;">Submit</button>
			
		</div>
	</body>
</html>

cola。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript添加删除表单

要点：获取表单中应标签对其或其属性进行操作<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ /* 超链接删除员工 */ let alla=document.getElem
复制链接

扫一扫