前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery的数据增删改查(全选,反选,全不选,批量删除,添加信息)

jquery的数据增删改查(全选,反选,全不选,批量删除,添加信息)

作者头像
全栈若城
发布2024-02-29 18:09:56
1390
发布2024-02-29 18:09:56
举报
文章被收录于专栏:若城技术专栏若城技术专栏

效果图如下:

html代码如下:

代码语言:javascript
复制
<body>
		<div class="btn">
			<button class="seleAll">全选</button>
			<button class="allDel">批量删除</button>
			<button class="reverse">反选</button>
			<button class="noneSele">全不选</button>
			
			<button class="add">添加</button>
		</div>
		
		<table width="500" border="1" >
			<tr height="30" align="center">
				<td> 选择 </td>
				<td>姓名</td>
				<td>爱好</td>
				<td>性别</td>
				<td>删除</td>
			</tr>
			<tr height="30" align="center">
				<td><input type="checkbox" /></td>
				<td>范冰冰</td>
				<td>演戏</td>
				<td>女</td>
				<td><input class="toDel" type="button" value="del" /> </td>
					
			</tr>
			
			
		</table>
		
		
		<div class="obox">
			<p><input class="name" type="text" value="姓名" /></p>	
			<p> 
				<select class="hobby">
					<option>音乐</option>
					<option>篮球</option>	
					<option>体育</option>
				</select>
			</p>
			<p>
				<select class="sex">
						<option>男</option>
						<option>女</option>
						
				</select>
			</p>
				
			<p class="push">
				<button>确认提交</button>
				
			</p>
		</div>

css代码如下:

代码语言:javascript
复制
.obox{
			width: 400px;
			height: 400px;
			margin: 0 auto;
			background: #e5e5e5;
			display:none;
		}
		.obox input{
			width: 150px;
			height: 30px;
		}
		.obox select{
			width: 150px;
			height: 30px;
			
		}
		.obox p{
			width: 150px;
			height: 30px;
			margin: 0 auto;
			margin-top: 30px;
		}
		
		.push button:active{
			background: #00f;
		}

jq代码如下:

代码语言:javascript
复制
	// 点击添加显示弹窗
			$(".add").on('click',function(){
				$(".obox").show()
				
				$(this).css({
					"background":"#0f0"
				})
				
			})
			// 点击确认提交提交数据 弹窗消失
			
			$(".push button").on("click",function(){
				
				// 获取文本框数据
				var theName= $(".name").val()
				var theHobby=$(".hobby").val()
				var theSex=$(".sex").val()
//				<tr align="center">
//				<td><input type="checkbox" /></td>
//				<td>范冰冰</td>
//				<td>演戏</td>
//				<td>女</td>
//				<td><input type="button" value="del" /> </td>
//					
//			</tr>
				// 将数据放到表格中
				$("table").append(`<tr height='30' align='center'>
					<td><input type='checkbox'   /> </td>
					<td >${theName} </td>
					<td>${theHobby} </td>
					<td>${theSex} </td>
					<td> <input class='toDel' type='button' value='del' /></td>
				</tr>`)
				//弹窗消失
				$(".obox").hide()
				
				$(".add").css({
					"background":"#ccc"
				})
				//点击del 删除本条数据
			$(".toDel").on("click",function(){
				$(this).parent().parent().remove()
				
				
			})
	
				
			})
			
			
			//点击全选 全部选中
			
			$(".seleAll").on('click',function(){
				
				var seleAll=$("input[type='checkbox']")
				seleAll.each(function(){
					seleAll.prop('checked',true)
					
				})
				
				
			})
			// 反选
			$(".reverse").on("click",function(){
				var seleAll=$("input[type='checkbox']")
				
				seleAll.each(function(){
					this.checked=!this.checked
					
					
				})
				
			})
			
			//全不选
			$(".noneSele").on("click",function(){
				var seleAll=$("input[type='checkbox']")
				
				seleAll.each(function(){
					seleAll.prop('checked',false)
					
				})
			})
			//批量删除
			
			$(".allDel").on("click",function(){
				
				var allDel=$(":checkbox:checked")
				if (allDel.length>0) {
					allDel.each(function(){
						$(this).parent().parent().remove()
						
					})
					
				} else{
					alert('请选中数据后在删除')	
				}
				
			})
			
			//点击del 删除本条数据
			$(".toDel").on("click",function(){
				$(this).parent().parent().remove()
				
				
			})

好了!如果有更好的修改意见或建议欢迎留言

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-02-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档