【JavaScript-练习】表格增删

最新推荐文章于 2024-09-14 17:54:00 发布

愿所奋斗皆所得

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量157

点赞数

分类专栏： JavaWeb学习文章标签： js dom html5

本文链接：https://blog.csdn.net/weixin_40740272/article/details/105037042

版权

JavaWeb学习专栏收录该内容

10 篇文章 1 订阅

订阅专栏

通过点击事件，获取输入框中的内容，将获取到的内容，添加到新的一行中，然后将这一行作为子元素添加到表格中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>05-表格增删.html</title>
</head>
<script type="text/javascript">
	window.onload = function () {
	//	获取点击事件
		document.getElementById("addUser").onclick = function () {
		//	获取姓名、电话、住址 中的内容
			var name = document.getElementById("name").value;
			var tel = document.getElementById("tel").value;
			var addr = document.getElementById("addr").value;

		//	创建tr元素，将以上信息作为td添加到tr中，再将tr作为子元素添加到table中
			var newTr = document.createElement("tr");
			var tdName = document.createElement("td");
			tdName.innerText = name;

			var tdTel = document.createElement("td");
			tdTel.innerText = tel;

			var tdAddr = document.createElement("td");
			tdAddr.innerText = addr;

			var del = document.createElement("td");
			del.innerHTML = "<a href=\"#\" οnclick=\"deleteMyRow(this);\">删除</a>";

		//	将三个td作为子元素添加到tr中
			newTr.appendChild(tdName);
			newTr.appendChild(tdTel);
			newTr.appendChild(tdAddr);
			newTr.appendChild(del);

		//	获取table  对象
			var table = document.getElementById("usertable");
			table.appendChild(newTr);
		}


	//	获取a标签，从而进行删除
		var aDel = document.getElementsByTagName("a");
		aDel.onclick = function () {
			deleteMyRow(this);
		}

	}

	function deleteMyRow(obj) {
		var tr = obj.parentNode.parentNode;
		tr.remove();
	}
</script>
<body>
	<center>
		<br>
		<br> 添加用户:<br>
		<br> 姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp; 电话: <input type="text"
			name="tel" id="tel" />&nbsp;&nbsp; 住址: <input type="text" name="addr" id="addr" /><br>
		<br>
		<button id="addUser">提交</button>
		<br>
		<br>
		<hr>
		<br>
		<br>
		<table id="usertable" border="1" cellpadding="5" cellspacing="0">
			<tr>
				<th>姓名</th>
				<th>电话</th>
				<th>住址</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>110</td>
				<td>上海</td>
				<td><a href="#" onclick="deleteMyRow(this);">删除</a>
				</td>
			</tr>
		</table>
	</center>
</body>
</html>