jQuery实现增删改查


Posted in jQuery onDecember 22, 2020

本文实例为大家分享了jQuery实现增删改查的具体代码,供大家参考,具体内容如下

  • jquery用的是1.11版本
  • css就用bootstrap吧
  • 因为增和改用了模态框修改,所以还用了bootstrap.js实现模态框的弹出和关闭

做了个简单的表格来实现功能

HTML代码段

//表格
<div class="container" style="padding-top: 40px;">
  <div class="form-group">
  <div class="row">
   <div class="col-md-8">
   <input type="text" class="form-control swich" />
   </div>
   <div class="col-md-3">
   <button class="btn btn-danger sreach">搜索</button>
   <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button>
   </div>
  </div>
  </div>
  <table class="table table-bordered text-center">
  <tr>
   <td>编号</td>
   <td>姓名</td>
   <td>成绩</td>
   <td>操作</td>
  </tr>
  <tr>
   <td>1</td>
   <td>张三</td>
   <td>89</td>
   <td>
   <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
   <button class="btn btn-danger del">删除</button>
   </td>
  </tr>
  <tr>
   <td>2</td>
   <td>李四</td>
   <td>91</td>
   <td>
   <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
   <button class="btn btn-danger del">删除</button>
   </td>
  </tr>
  <tr>
   <td>3</td>
   <td>刘一</td>
   <td>80</td>
   <td>
   <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
   <button class="btn btn-danger del">删除</button>
   </td>
  </tr>
  </table>
 </div>
    //修改的模态框
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h4 class="modal-title" id="myModalLabel">修改信息</h4>
   </div>
   <div class="modal-body">
   <form>
    <div class="form-group">
    <input type="text" placeholder="编号" id="reusrnum" class="form-control" />
    </div>
    <div class="form-group">
    <input type="text" placeholder="名字" id="reusrname" class="form-control" />
    </div>
    <div class="form-group">
    <input type="text" placeholder="成绩" class="form-control" id="rescore" />
    </div>
   </form>
 
   </div>
   <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
   <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
   </div>
  </div>
  <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
 </div>
 //增加的模态框
 <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h4 class="modal-title" id="myModalLabel">增加信息</h4>
   </div>
   <div class="modal-body">
   <form>
    <div class="form-group">
    <input type="text" placeholder="编号" id="reusrnum" class="form-control" />
    </div>
    <div class="form-group">
    <input type="text" placeholder="名字" id="reusrname" class="form-control" />
    </div>
    <div class="form-group">
    <input type="text" placeholder="成绩" class="form-control" id="rescore" />
    </div>
   </form>
 
   </div>
   <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
   <button type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
   </div>
  </div>
  <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>

Jquery代码段

<script>
  //删除的功能
  $(document).on("click", ".del", function() {
  $(this).parents("tr").remove()
  })
  //改的功能
  var _this = null
  $(document).on("click", ".rev", function() {
  var _arr = []
  _this = $(this).parents("tr")
  $(this).parents("tr").find("td:not(:last)").each(function(){
   _arr.push($(this).text())
  })
  $("#myModal").find("input").each(function(i){
   $(this).val(_arr[i])
  })
  })
  
  $(document).on("click",".olk", function(){
  var _arr = []
  $("#myModal").find("input").each(function(){
   _arr.push($(this).val())
  })
  _this.find("td:not(:last)").each(function(i){
   $(this).text(_arr[i])
  })  
  })
  //增加的功能
  $(document).on("click",".aad",function(){
  var _arr = []
  var str = ""
  $("#myModel").find("input").each(function(){
   _arr.push($(this).val())
   
  })
  
  str = '<tr><td>'+_arr[0]+'</td><td>'+_arr[1]+'</td><td>'+_arr[2]+'</td><td><button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button> <button class="btn btn-danger del">删除</button></td></tr>'
  $(".table").append(str)
  
  })
  //查的功能
  $(".sreach").click(function(){
  var oS = $(".swich").val()
  if(oS.length==0){
   alert("请输入点东西")
   }else if($("table tr td:contains('"+oS+"')").length==0){
   alert("找不到数据")
   }else{
   $(".table tr:not(:first)").hide()
   $(".table tr:contains('"+oS+"')").show().find("input").prop("checked",true)
   }
 
  })
</script>

ps:新人,class的命名有点不规范...将就看着吧

解说思路

ps:要记得对象缓存 _this = $(this).null

1.实现删的功能

首先准确地找到当前按钮的父级元素tr,然后remove()掉就实现了删的功能

2.实现改的功能

这里先做了个数组来存储已有的信息, 用遍历的方法each()放进数组,数组的数据再push()进模态框的input框val()可进行显示

点击模态框的确认按钮才能实现更改,所以又要重新将已更改的input框的val()重新遍历进另外的一个数组进行存储,再push()进表格就实现更改的更改了

3.实现增的功能

增加的功能也用了模态框来采集数据,所以也用一个数组来存储数据,将已采集的input框val()遍历进数组,创建一个命名为str的dom节点,用数组下标来插入要追加的dom节点,增加的功能就实现了

4.实现查的功能          

首先要获取搜索框里val(), 判断搜索框的长度是否为0,假如是0就弹出“请输入点东西”,再用contains()方法判断搜索框的内容在表格里的有没有,没有就弹出“找不到数据”,再或者搜素框的内容在表格里有就把除了第一行的数据hide(),将表格里有和val()一样的tr show()出来

整个table的增删改查的功能就实现啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JQuery实现图片轮播效果
May 08 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jQuery实现本地存储
Dec 22 #jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
jQuery+ajax实现文件上传功能
Dec 22 #jQuery
jQuery实现动态向上滚动
Dec 21 #jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
You might like
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python3实现字符串操作的实例代码
2019/04/16 Python
python tornado修改log输出方式
2019/11/18 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
如何理解python面向对象编程
2020/06/01 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
关于读书的演讲稿
2014/05/07 职场文书
岗位说明书怎么写
2014/07/30 职场文书
法定授权委托证明书
2014/09/27 职场文书
新党员入党决心书
2015/09/22 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
六年级作文之预言作文
2019/10/25 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python