javaScript - 删除添加元素

最新推荐文章于 2024-08-02 08:30:00 发布

FY_LaoDuan

最新推荐文章于 2024-08-02 08:30:00 发布

阅读量207

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_26837711/article/details/53344131

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<script type="text/javascript">
			function addPerson() {

				var name = document.getElementsByName("name")[0].value;
				var email = document.getElementsByName("email")[0].value;
				var salary = document.getElementsByName("salary")[0].value;

				if(name.length <= 0) {

					alert("name  不能为空....");

					return false;

					if(email.length <= 0) {
						alert("email  不能为空....");
						return false;

						if(salary.length <= 0)
							alert("salary  不能为空....");
						return false;

					}

				}

				var tr = document.createElement("tr");//创建 tr 元素

				var nametd = document.createElement("td"); //创建 展示 name 的 td 元素
				var namenote = document.createTextNode(name); //创建 name 的 文件元素 
				nametd.appendChild(namenote); //把 namenote 添加到 nametd 上   一下的类似
				
				//  在写到第二个是，我想到分装成一个一个函数

				var emailtd = document.createElement("td");
				var emailnote = document.createTextNode(email);
				emailtd.appendChild(emailnote);

				var salarytd = document.createElement("td");
				var salarynote = document.createTextNode(salary);
				salarytd.appendChild(salarynote);

				var deletetd = document.createElement("td");
				var anote = document.createElement("a");
				var deletenote = document.createTextNode("delete");
				anote.setAttribute("href", "#");
				var hrefattr = document.createAttribute("href");
				anote.appendChild(deletenote);
				deletetd.appendChild(anote);

				anote.addEventListener("click", function() {

					var trNote = this.parentNode.parentNode;
					var name = trNote.getElementsByTagName("td")[0].firstChild.nodeValue;
					var flag = confirm("确定要删除" + name + "的信息吗");

					if(flag) {

						trNote.parentNode.removeChild(trNote);

					}

					return false;

				});

				tr.appendChild(nametd);
				tr.appendChild(salarytd);
				tr.appendChild(emailtd);
				tr.appendChild(deletetd);

				document.getElementsByTagName("table")[0].appendChild(tr);

			}

			window.onload = function() {

				//获取所有 table 下的所有  a 标签
				var aNotes = document.getElementsByTagName("table")[0].getElementsByTagName("a");

				//消除默认行为

				for(var a = 0; a < aNotes.length; a++) {

					aNotes[a].onclick = function() {

						var trNote = this.parentNode.parentNode;
						var name = trNote.getElementsByTagName("td")[0].firstChild.nodeValue;
						var flag = confirm("确定要删除" + name + "的信息吗");

						if(flag) {

							trNote.parentNode.removeChild(trNote);

						}

						return false;
					}

				}

			}
		</script>

	</head>

	<body>
		<div align="center">
			<form action="#" method="post">

				name :<input type="text" name="name" /><br /> email :<input type="text" name="email" /><br /> salary :<input type="text" name="salary" /><br />

			</form>
			<button οnclick="addPerson()">提交</button>
		</div>
		<hr />

		<table border="1" cellspacing="0" align="center">

			<tr>

				<th>name</th>
				<th>email</th>
				<th>salary</th>
				<th></th>

			</tr>
			<tr>
				<td>Tom</td>
				<td>2000</td>
				<td>tom@dd.com</td>
				<td>
					<a href="#">delete</a>
				</td>

			</tr>

			<tr>
				<td>Marry</td>
				<td>3000</td>
				<td>marry@dd.com</td>
				<td>
					<a href="#">delete</a>
				</td>

			</tr>

			<tr>
				<td>Rose</td>
				<td>4000</td>
				<td>rose@dd.com</td>
				<td>
					<a href="#">delete</a>
				</td>

			</tr>

		</table>

	</body>

</html>