js实现表格录入信息、删除操作

最新推荐文章于 2023-05-29 19:51:26 发布

一杯崽！

最新推荐文章于 2023-05-29 19:51:26 发布

阅读量430

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_55068275/article/details/122150030

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			width: 300px;
			height: 500px;
			border: 1px solid;
			margin: 20px auto;
			padding-left: 66px;
			padding-top: 15px;
		}
		
		</style>
	</head>
	<body>
				姓名：<input  type="text" name="" id="" value=""><br />
				班级：<input  type="text" name="" id="grade" value=""/><br />
				姓别：<input  type="radio" value="男" name="sex"/>男<input type="radio" value="女" name="sex" />女<br />
				年龄：<input  type="text" required="" name="" id="age" value=""/><br />
				<button id="btn1" >增加</button>
				<hr />
			<table border="1px" >
				<tr>
					<td>姓名</td>
					<td>班级</td>
					<td>性别</td>
					<td>年龄</td>
					<td>操作</td>
				</tr>
			</table>
		<script type="text/javascript">
		window.onload=function(){
				document.getElementById("btn1").onclick=function(){
				var Z1=document.getElementsByTagName("input")[0].value;
				var Z2=document.getElementsByTagName("input")[1].value;
				var Z3=document.getElementsByTagName("input")[2].value;
				var Z4=document.getElementsByTagName("input")[4].value;
				
				// 追加tr
				var mytd=document.getElementsByTagName("table")[0];
				var addtr=document.createElement("tr");
				var a=mytd.appendChild(addtr);
				
				// 追加td
				var addtd=document.createElement("td");
				var name1=a.appendChild(addtd);
				name1.innerHTML=Z1;
				// 班级
				var addtd=document.createElement("td");
				var grade1=a.appendChild(addtd);
				grade1.innerHTML=Z2;
				// 性别
				var addtd=document.createElement("td");
				var sex1=a.appendChild(addtd);
				sex1.innerHTML=Z3;
				// 年龄
				var addtd=document.createElement("td");
				var age1=a.appendChild(addtd);
				age1.innerHTML=Z4;
				
				// 删除
				var addtd=document.createElement("td");
				var del=a.appendChild(addtd);
				del.innerHTML='删除';
				
				// 获取值
				
				del.onclick=function(){
					name1.remove();
					grade1.remove();
					sex1.remove();
					age1.remove();
					
					del.remove();
				}
			}
			
		}
		</script>
	</body>
</html>

一杯崽！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现表格录入信息、删除操作

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ width: 300px; height: 500px; border: 1px solid; margin: 20px auto; padding-left: 66px; .
复制链接

扫一扫