前端表单提交与动态表格填充实例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53587164/article/details/124702437

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#form {
				width: 480px;
				margin: 30px auto;
				border: 1px solid #eee;
				border-radius: 5px;
				padding: 10px;
				line-height: 30px;
				position: relative;
			}

			button {
				position: absolute;
				right: 10px;
				bottom: 10px;
			}

			#tab {
				width: 500px;
				margin: 30px auto;
				border-collapse: collapse;
			}

			th,
			td {
				border: 1px solid #000;
				padding: 15px;
			}

			tbody tr td:first-child {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="form">
			请输⼊姓名: <input type="text" id="name"> <br>
			请输⼊学号: <input type="text" id="xh"> <br>
			请输⼊性别: <input type="text" id="sex"><br>
			请输⼊年龄: <input type="text" id="age">
			<button>提交</button>
		</div>
		<table id="tab">
			<thead>
				<tr>
					<th >顺序</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
	<script type="text/javascript">
		  var Input = document.getElementsByTagName("input");
		           var But = document.getElementsByTagName("button");
		           var Table = document.getElementsByTagName("table")[0];
		           var tBodies= Table.tBodies[0];
		           var allBut = document.getElementById("all");
					
		         
		            But[0].onclick = function () {
		            
		                var tr = document.createElement("tr");
		                tr.appendChild(createNode("td",Input[0].value));
		                tr.appendChild(createNode("td", Input[1].value));
		                tr.appendChild(createNode("td",Input[2].value));
		                tr.appendChild(createNode("td", Input[3].value));
		                tBodies.appendChild(tr);
		                
		            }
		
		            function createNode(element,text) {
		                var td = document.createElement(element);
		                td.innerHTML = text;
		                return td;
		            }
		    

	</script>
</html>

点击输入添加表格