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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 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
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
学习python (1)
2006/10/31 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python 合并拼接字符串的方法
2020/07/28 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
python线程优先级队列知识点总结
2021/02/28 Python
任意存:BOXFUL
2018/05/21 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
清正廉洁演讲稿
2014/05/22 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
检讨书格式
2015/05/07 职场文书
四则混合运算教学反思
2016/02/23 职场文书
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis