js实现表格内容添加与删除

最新推荐文章于 2024-05-16 16:52:30 发布

xiaopofu

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量502

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/xiaopofu/article/details/104879376

版权

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

表格内容的添加与删除

以下是效果展示

1.基本样式和结构

	<body>
		<div class="form">
			<h3>表格添加</h3>
			姓名:&nbsp;<input type="text" id="name">
			<br>
			年龄:&nbsp;<input type="text" id="age">
			<br>
			性别:&nbsp;<input type="text" id="gender">
			<br>
			<input type="button" value="添加" id="submit">
		</div>
		<div class="formation" style="display: none;">
			<h3>内容展示<span><a href="#" class="add">添加</a></span></h3>
			<table border="1" cellspacing="1" class="table">
				<thead>
					<tr id="dan">
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>张三</td>
						<td>15</td>
						<td>男</td>
						<td><a href="javascript:void(0);" class="del">删除</a></td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>

2.获取元素

		var form = document.querySelector(".form");
		var add = document.querySelector(".add");
		var submit = document.querySelector("#submit");
		var formation = document.querySelector(".formation");

3.设置点击事件

		submit.onclick = function() {
			var name = document.getElementById("name").value
			var age = document.getElementById("age").value
			var gender = document.getElementById("gender").value
			if (name == "") {
				alert("姓名不能为空")
				return false;
			}
			if (age == "") {
				alert("年龄不能为空")
				return false;
			}
			if (isNaN(age) == true) {
				alert("年龄必须为数字")
				return false
			}
			if (gender == "") {
				alert("性别不能为空")
				return false;
			}
			var tr = document.createElement("tr")
			tr.innerHTML = "<td>" + name + "</td>" + "<td>" + age + "</td>" + "<td>" + gender + "</td>" +"<td><a href='javascript:void(0);'>删除</a></td>"
			tbody.appendChild(tr)
			var a=tr.getElementsByTagName("a")[0]
			a.href='javascript:void(0);'
			a.onclick=function(){
				var tr=this.parentNode.parentNode;
				tbody.removeChild(tr)
			}
			formation.style.display = "block"
			form.style.display="none"
		}
		var del=document.querySelector(".del")
		var tbody = document.querySelector("tbody")
		del.onclick=function(){
			var tr=this.parentNode.parentNode;
			tbody.removeChild(tr)
			del.onclick=false
		}
		add.onclick=function(){
			formation.style.display="none"
			form.style.display="block"
		}

xiaopofu

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现表格内容添加与删除

表格内容的添加与删除以下是效果展示1.基本样式和结构 <body> <div class="form"> <h3>表格添加</h3> 姓名:&nbsp;<input type="text" id="name"> <br> 年龄:&nbsp;<input type="t...
复制链接

扫一扫

专栏目录