jquery的数据增删改查（全选，反选，全不选，批量删除，添加信息）

最新推荐文章于 2020-10-21 18:20:46 发布
最新推荐文章于 2020-10-21 18:20:46 发布
阅读量1.2k 收藏 7
点赞数
分类专栏： 前端集合 文章标签： jquery增删改查 全选 反选 全不选 删除
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33681891/article/details/83140689
版权

效果图如下：

html代码如下：

<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代码如下：

.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代码如下：

	// 点击添加显示弹窗
			$(".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()
				
				
			})

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

全栈若城
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS随手记——复选框的全选、全不选与反选
01-08
目标需求：按钮点击实现复选框的全选、全不选与反选 分析：获取到复选框数组后，循环对复选框的选择状态赋值，全选赋true值，全不选赋false值，反选赋其相反值 页面大致如下： 页面部分代码如下： 篮球 唱歌 美术 弹琴 游泳 其中，全选与全不选均调用likeall方法，全选传true，全不选传false： function likeall(bools){ var likearr = document.getElementsByName(likes); for(var i = 0;i < likearr.length; i++) {
纯Jquery表格全选+反选+增删查找
11-13
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
JQery实现全选，反选，全不选 批量删除
坚持去坚持。
10-21 370
JQuery的代码实例 $(function(){ //全选、全不选的操作 $("#all").click(function(){ if(this.checked){ $("input[name='ids']").prop("checked",true); }else{ $("input[name='ids']").prop("checked",false...
使用JQuery实现全选、反选、添加和删除功能
qizhichao110的专栏
05-06 2344
练习要求： 1.班级 姓名 薪水 就业单位  是否转正 2.全选，取消全选，反选 3.实现删除功能：删除一行或多行 4.实现添加功能。添加一行。                  table         {             width: 600px;             height: 400px;         }         table t
jQuery添加删除,全选反选,批量删除
xiaozi_11的博客
12-10 305
练习                                                                                                    用户名                                                                            密码   
用户注册页面的设计与实现
热门推荐
YQEMMMM的博客
10-21 2万+
用户注册页面的设计与实现 功能介绍： 1.使用HTML5表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。 2.验证要求：每个输入栏目的文本框均需要显示提示信息。用户在点击按钮提交注册信息时可以验证所有栏目均为必填项以及电子邮箱的有效性。 实现效果图： 一、界面设计 1.使用<div>划分区域 2.使用CSS外部样式表定义样式 1）reg.css 2）关键属性：box-shadow: 10px 10px 15px black; 二、表单设计 1.使用&l
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
springmvc+mysql增删改查批量删除异步请求全选反选
09-05
非常好的一个springmvc项目，下载即运行,包含了增删改查，批量删除，全选/反选，异步请求等内容。springmvc+mysql增删改查批量删除异步请求全选反选
jquery全选反选全不选案例
04-04
jquery实现全选反选全不选案例，在入场网页开发中实现。
jQuery全选反选及批量删除
08-28
jQuery全选反选及批量删除
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享
11-29
效果展示： 代码实现： 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use app\models\EcsGoods; class PageController exten
jquery 实现全选，全不选，反选，获取选中的值
12-19
实现全选，全不选，反选，获取选中的值 。
JS实现全选反选全不选
06-18
JS实现全选反选全不选
2023年加湿器市场分析.pptx
04-18
行业分析报告
Skeleton-Low Poly 低多边形骨架模型Unity插件美术资源包unitypackage
04-18
Skeleton-Low Poly 低多边形骨架模型Unity插件美术资源包unitypackage 支持Unity版本2019.4.29或更高 直接的低多边形骨架。 特点： - 低多边形（9k tris，8.5） - 适用于 Unity 5 及更高 版本 - 完全装配 - 包括一个 fbx 格式的模型 - PBR 纹理 - 高清纹理
基于Java的Swing飞机订票系统设计源码
04-18
本项目是基于Java的Swing飞机订票系统设计源码，包含102个文件，其中主要包含41个java源代码文件，26个png图片文件，10个jpg图片文件等。系统采用了Java编程语言，实现了基于Swing的飞机订票系统。项目结构清晰，代码可读性强，易于理解和维护。
2023年全球包装油市场趋势分析.pptx
04-18
行业分析报告
工作汇报 年终总结2.pptx
最新发布
04-18
引言 年度工作回顾 系统进展与亮点 技术创新与应用 市场反馈与用户评价 存在问题与挑战 未来展望与计划 结束语与感谢 一、引言 简要介绍智能家居系统的重要性和发展趋势 回顾本年度的工作目标和重点 二、年度工作回顾 系统建设与维护 完成的项目与里程碑 系统稳定性与可靠性提升 团队建设与培训 团队成员构成与职责 培训与技能提升活动 合作伙伴与资源整合 与供应商、合作伙伴的合作情况 资源整合与利用 三、系统进展与亮点 功能扩展与优化 新增功能介绍与效果评估 现有功能的优化与改进 用户体验提升 界面设计与交互优化 用户反馈与改进措施 四、技术创新与应用 物联网技术的应用 传感器与通信技术的升级 大数据分析与应用 智能家居的智能化管理 自动化控制与节能策略 安全防护与预警系统 五、市场反馈与用户评价 市场反馈分析 市场需求与竞争态势 市场占有率与增长趋势 用户评价总结 用户满意度调查结果
原生dom实现增删改查，全选反选
06-13
好的，下面是原生DOM实现增删改查、全选反选的示例代码： ```html <!DOCTYPE html> <title>DOM增删改查、全选反选 <h3>DOM增删改查、全选反选示例 <!-- 添加元素 --> 添加 <!-- 显示元素列表 --> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈若城

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值