【JQuery】实现表格的增删改

最新推荐文章于 2023-10-27 13:30:01 发布

南歌EuanSu

最新推荐文章于 2023-10-27 13:30:01 发布

阅读量600

点赞数 3

分类专栏：前端学习文章标签： html jquery

本文链接：https://blog.csdn.net/suu_an/article/details/108299424

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在原基础之上实现了鼠标右键菜单。

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			table{
				margin: 50px auto;
				text-align: center;
			}
			th{
				width: 120px;
				height: 40px;
				background-color: darkgray;
				border: solid 2px white;
			}
			td{
				width: 110px;
				height: 40px;
				background-color: lightseagreen;
				border: solid 2px white;
			}
			ul{
				display: none;
				position: absolute;
			}
			li{
				text-align: center;
				color: white;
				background-color: darkturquoise;
				width: 70px;
				list-style: none;
			}
		</style>
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script>
			$(function(){
				$.each($('tr'), function(i) {
					//当前行被点击的时候，变为红色
					$('tr')[i].onclick=function(){
						//$(this).css('background','red')
						let dtr=$(this)
						//设置时间间隔
						
						//1.直接点击删除
						/*
						let dtr=$(this)
						setTimeout(function(){
							dtr.remove()
						},1000)*/
						//2.右键菜单点击删除
						this.oncontextmenu=function(event){
							let e=window.event || event
							
							$('ul')[0].style.top=e.clientY+'px'
							$('ul')[0].style.left=e.clientX+'px'
							$('ul')[0].style.display='block'
							return false
						}
						//删除功能实现
						$('li')[0].onclick=function(){
							$(dtr).remove()
						}
						//添加功能实现
						$('li')[1].onclick=function(){
							let newtr = $('<tr><td>000</td><td>姓名</td><td>班级</td><td>家庭住址</td><td>联系电话</td></tr>')
							$('table').append(newtr)
						}
						
					}
				});
			})
		</script>
	</head>
	<body>
		<div>
			<input type="text" id="sno" placeholder="请输入学生学号" />
			<input type="text" id="sname" placeholder="请输入学生姓名" />
			<input type="text" id="class" placeholder="请输入学生班级" />
			<input type="text" id="address" placeholder="请输入学生家庭住址" />
			<input type="text" id="tel" placeholder="请输入学生联系电话" />
		</div>
		<ul>
			<li>删除</li>
			<li>添加</li>
		</ul>
		<table cellspacing="0">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>班级</th>
				<th>家庭住址</th>
				<th>联系电话</th>
			</tr>
			<tr>
				<td>001</td>
				<td>张三</td>
				<td>12</td>
				<td>陕西延安</td>
				<td>13012345678</td>
			</tr>
			<tr>
				<td>002</td>
				<td>李四</td>
				<td>16</td>
				<td>陕西西安</td>
				<td>13056781234</td>
			</tr>
		</table>
	</body>
</html>

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				margin: 50px auto;
				text-align: center;
			}
			table{
				margin: 0 auto;
				text-align: center;
			}
			th{
				width: 120px;
				height: 40px;
				background-color: darkgray;
				border: solid 2px white;
			}
			td{
				width: 110px;
				height: 40px;
				background-color: lightseagreen;
				border: solid 2px white;
			}
			#del{
				margin-left: 830px;
			}
		</style>
		<!--引入jquery-->
		<script src="../js/jquery.min.js"></script>
		<script>
			$(function(){
				$("#add").click(function(){
					let sno = $('#sno').val()
					let sname = $('#sname').val()
					let scla = $('#class').val()
					let address = $('#address').val()
					let tel = $('#tel').val()
					let newtr = $('<tr><td><input type="checkbox" /></td><td>'+sno+'</td><td>'+sname+'</td><td>'+scla+'</td><td>'+address+'</td><td>'+tel+'</td></tr>') 
					$('table').append(newtr)
				})
				$("#del").click(function(){
					$("[type='checkbox']:checked").each(function(){
						num = $(this).parents("tr").index()
						$("table tr:eq("+num+")").remove();
					})
				})
				$("#modify").click(function(){
					let sno = $('#sno1').val()
					let sname = $('#sname1').val()
					let scla = $('#class1').val()
					let address = $('#address1').val()
					let tel = $('#tel1').val()
					let line = $('#line').val()
					let newtr = $('<tr><td><input type="checkbox" /></td><td>'+sno+'</td><td>'+sname+'</td><td>'+scla+'</td><td>'+address+'</td><td>'+tel+'</td></tr>') 
					$('tr:eq('+line+')').replaceWith(newtr)
				})
			})
		</script>
	</head>
	<body>
		<div>
			<input type="text" id="sno" placeholder="请输入学生学号" />
			<input type="text" id="sname" placeholder="请输入学生姓名" />
			<input type="text" id="class" placeholder="请输入学生班级" />
			<input type="text" id="address" placeholder="请输入学生家庭住址" />
			<input type="text" id="tel" placeholder="请输入学生联系电话" />
			<input type="button" id="add" value="添加学生信息" /><br />
			
			<input type="text" id="sno1" placeholder="请输入学生学号" />
			<input type="text" id="sname1" placeholder="请输入学生姓名" />
			<input type="text" id="class1" placeholder="请输入学生班级" />
			<input type="text" id="address1" placeholder="请输入学生家庭住址" />
			<input type="text" id="tel1" placeholder="请输入学生联系电话" />
			<input type="text" id="line" placeholder="请输入修改的行数"  />
			<input type="button" id="modify" value="修改学生信息" /><br />
			
			
			<input type="button" id="del" value="删除选中的学生信息" />
			
			

			<table cellspacing="0">
				<caption>学生信息表</caption>
				<tr>
					<th></th>
					<th>学号</th>
					<th>姓名</th>
					<th>班级</th>
					<th>家庭住址</th>
					<th>联系电话</th>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>001</td>
					<td>张三</td>
					<td>12</td>
					<td>陕西延安</td>
					<td>13012345678</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>002</td>
					<td>李四</td>
					<td>16</td>
					<td>陕西西安</td>
					<td>13056781234</td>
				</tr>
				
			</table>
		</div>
	</body>
</html>

最终实现效果：