动态生成表格-CSDN博客

本文链接：https://blog.csdn.net/qq_43386754/article/details/85875167

动态生成一个表格,定义一个表单,用户输入内容,就可以自动将内容添加到表格中,表格中尾部添加一个删除操作,可以删除单个数据,最后添加一个按钮可以删除表格中的所有数据
初始化html页面

<html>
<head>
	<title>动态页面!</title>
	<meta charset="utf-8"/>
</head>

	<script type="text/javascript">
		window.onload = function(){

		}
	
	</script>
<body>
	
	<div id="inputDiv">
			部门编号:<input name="deptno" id="deptno" type="text" ><br/>
			部门名称:<input name="dname" id="dname" type="text" ><br/>
			部门位置:<input name="loc" id="loc" type="text" ><br/>
			<input type="button" id="addBut" value="增加"/>
	</div>
	<div id="tableDiv">
		<table border="1" width="100%">
			<tr>
				<td>部门编号</td>
				<td>部门名称</td>
				<td>部门位置</td>
				<td>操作</td>
			</tr>
		</table>
		<input type="button" id="delAllBut" value="删除全部"/>
	</div>
</body>
</html>

初始化页面效果

在这里插入图片描述

添加javascript代码

	<script type="text/javascript">
		window.onload = function(){
		//获取到两个按钮的元素
			var addButEle = document.getElementById("addBut");
			var delAllButEle = document.getElementById("delAllBut");
			//为按钮绑定点击事件
			addButEle.addEventListener("click",function(){add();},false)
			delAllButEle.addEventListener("click",function(){deleteAll();},false)
		}
		//添加数据的方法
		function add(){
			//获取到要增加的数据内容
			var deptno = document.getElementById("deptno").value;
			var dname = document.getElementById("dname").value;
			var loc = document.getElementById("loc").value;
			//得到要添加到的表格元素
			var tableEle = document.getElementById("deptTable");
			addRow(deptno,dname,loc,deptTable);
			clearInput("deptno","dname","loc");
		}
		//增加表格行的方法
		function addRow(deptno,dname,loc,tableEle){
			//创建tr元素(行元素)
			var trEle = document.createElement("tr");
			//设置表格行的id属性,默认这个id值为"row + deptno",deptno的值不能够重复
			trEle.setAttribute("id","row"+deptno);
			//创建四个td元素,单元格
			var deptnoTd = document.createElement("td");
			var dnameTd = document.createElement("td");
			var locTd = document.createElement("td");
			var delTd = document.createElement("td");
			
			//向单元格中添加数据
			deptnoTd.appendChild(document.createTextNode(deptno));
			dnameTd.appendChild(document.createTextNode(dname));
			locTd.appendChild(document.createTextNode(loc));

			
			//设置删除按钮
			//为了达到删除的目的使用按钮完成
			var delBut = document.createElement("input");
			delBut.setAttribute("value","删除");
			delBut.setAttribute("type","button");
			//为此按钮绑定事件
			delBut.addEventListener("click",function(){
				//获取到当前表格行的元素
				var trEle = document.getElementById("row"+deptno);
				//删除当前行
				trEle.parentNode.removeChild(trEle);
			},false);
			delTd.appendChild(delBut);
			
			//将td元素添加为tr的子元素
			trEle.appendChild(deptnoTd);
			trEle.appendChild(dnameTd);
			trEle.appendChild(locTd);
			trEle.appendChild(delTd);
			//将tr元素设置为table元素的子元素
			tableEle.appendChild(trEle);
		}
		//清空表格的方法
		function clearInput(inputA,inputB,inputC){
			document.getElementById(inputA).value = "";
			document.getElementById(inputB).value = "";
			document.getElementById(inputC).value = "";
		}
		//删除表格全部数据的方法
		function deleteAll(){
			//得到所有tr元素
			var trNodes = document.getElementsByTagName("tr");
			var len = trNodes.length;
			//第0行是表格的表头部分,不要删除,从第1行开始
			for(var x = 1; x < len; x++){
				if(trNodes[1] != undefined){}
				trNodes[1].parentNode.removeChild(trNodes[1]);
			}
		}
	</script>