js表格

最新推荐文章于 2022-07-23 16:22:02 发布

chqm120

最新推荐文章于 2022-07-23 16:22:02 发布

阅读量385

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/chqm120/article/details/9456093

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<center>
		<br /> <br /> 添加用户：<br /> <br /> 名字：<input name="name" type="text"
			id="name" /> 邮箱：<input name="email" type="text" id="email" /> 电话：<input
			name="tel" type="text" id="tel" /><br /> <br />
		<button id="adduser">提交</button>
		<br />
		<hr />
		<table width="699" border="1" cellpadding="5" cellspacing="1"
			id="userTable"><tbody>
				<tr>
					<th>名字</th>
					<th>邮箱</th>
					<th>电话</th>
					<th>操作</th>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td><a href="deleteEmp?id=aaa">删除</a>
					</td>
				</tr>
				<tr>
					<td>bbb</td>
					<td>bbb</td>
					<td>bbb</td>
					<td><a href="deleteEmp?id=bbb">删除</a>
					</td>
				</tr>
			</tbody>
		</table>

	</center>
</body>
<script language="javascript">
	window.onload = function() {
		document.getElementById("adduser").onclick = function() {

			//获取文本框值
			var nameValue = document.getElementById("name").value;
			var emailValue = document.getElementById("email").value;
			var telValue = document.getElementById("tel").value;
			//创建td
			var nameTd = document.createElement("td");
			var nameTextNode = document.createTextNode(nameValue);
			nameTd.appendChild(nameTextNode);

			var emailTd = document.createElement("td");
			var emailTextNode = document.createTextNode(emailValue);
			emailTd.appendChild(emailTextNode);

			var telTd = document.createElement("td");
			var telTextNode = document.createTextNode(telValue);
			telTd.appendChild(telTextNode);

			var aTd = document.createElement("td");
			var aElement = document.createElement("a");
			aElement.setAttribute("href", "deleteEmp?id=" + nameValue);
			var deleteTextNode = document.createTextNode("删除");
			aElement.appendChild(deleteTextNode);
			aTd.appendChild(aElement);
			//创建tr
			var trElement = document.createElement("tr");
			trElement.appendChild(nameTd);
			trElement.appendChild(emailTd);
			trElement.appendChild(telTd);
			trElement.appendChild(aTd);
			//tr->table
			var tableElement = document.getElementById("userTable");
			var tbodyElement = tableElement.firstChild;
			tbodyElement.appendChild(trElement);
			//删除
			aElement.onclick = function() {
				return delTr(aElement);
			}
		}
		function delTr(aElement) {
			var name = aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
			var flag = window.confirm("你确定要删除[" + name + "]吗？");
			if (!flag) {
				return false;
			}
			var tbodyElement = aElement.parentNode.parentNode.parentNode;
			var trElement = aElement.parentNode.parentNode;
			tbodyElement.removeChild(trElement);
			return false;
		}
	}
</script>
</html>