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 Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
关于react-router的几种配置方式详解
2017/07/24 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
python实现web方式logview的方法
2015/08/10 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
培训主管的岗位职责
2013/11/23 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
医学生职业规划范文
2014/01/05 职场文书
《颐和园》教学反思
2014/02/26 职场文书
党员个人对照检查材料
2014/10/01 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
Python基础知识之变量的详解
2021/04/14 Python
python flask框架快速入门
2021/05/14 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python