表格数据的添加与删除

157 阅读1分钟

1.png
单击删除,可删除对应的一行记录。
单击添加。可把姓名和年龄的对应信息添加到表格中。
编号自增。

代码:

<!DOCTYPE html>
<html>

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

	<body>
		姓名:<input size="11" id="name" /> 
                年龄:<input size="11" id="age" />
		<button id="btn1" onclick="add()">添加</button><br>
		<table id="emploeeTable" border="1px" width="300px">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>18</td>
				<td>
					<a href="javascript:;">删除</a>
				</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>20</td>
				<td>
					<a href="javascript:;">删除</a>
				</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>22</td>
				<td>
					<a href="javascript:;">删除</a>
				</td>
			</tr>
		</table>
	</body>
	<script>
		//获取所有超链接
		var allA = document.getElementsByTagName("a");
		//为每个超链接绑定一个单击响应函数
		for(var i = 0; i < allA.length; i++) {
			allA[i].onclick = function() {
				//获取当前tr
				var tr = this.parentNode.parentNode;
				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[1].innerHTML;
				var name = tr.children[1].innerHTML;
				//删除之前的提示框
				var flag = confirm("确认删除" + name + "吗?");
				if(flag) {
					tr.parentNode.removeChild(tr);
				}
			};

		}
		//为添加按钮添加单击响应函数
		var i = 3;

		function add() {
			i++;
			var trl = document.createElement("tr");
			var td1 = document.createElement("td");
			var td2 = document.createElement("td");
			var td3 = document.createElement("td");
			var td4 = document.createElement("td");
			var a = document.createElement("a");
			td1.innerText += i;
			td2.innerText = document.getElementById("name").value;
			td3.innerText = document.getElementById("age").value;
			a.innerText = "删除";
			a.onclick = function() {
				//获取当前tr
				var tr = this.parentNode.parentNode;
				//获取要删除的name
				var name = tr.getElementsByTagName("td")[1].innerHTML;
				//判断是否删除
				var flag = confirm("确认删除" + name + "吗?");
				if(flag) {
					a.parentElement.parentElement.remove();
					//tr.parentNode.removeChild(tr);					
				}
			}

			//a.appendChild(delValue);
			td4.appendChild(a);
			trl.appendChild(td1);
			trl.appendChild(td2);
			trl.appendChild(td3);
			trl.appendChild(td4);
			a.href = "javascript:;";

			//要把tr加到tbody里
			var tbody = document.getElementsByTagName("tbody")[0];
			tbody.appendChild(trl);
		}
	</script>

</html>