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 03 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery实现垂直手风琴菜单
Mar 04 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
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php微信开发之图片回复功能
2018/06/14 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python实现嵌套列表去重方法示例
2017/12/28 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
小学生学习保证书
2015/02/26 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python