jQuery+ajax实现批量删除功能完整示例


Posted in jQuery onJune 06, 2019

本文实例讲述了jQuery+ajax实现批量删除功能。分享给大家供大家参考,具体如下:

效果展示:

jQuery+ajax实现批量删除功能完整示例

完整代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Ding Jianlong Html</title>
  <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
  <link href="https://cdn.bootcss.com/layer/2.4/skin/layer.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
 <div class="container">
 <button class="btn btn-danger radius" onClick="batch_del()" style='margin:10px;'>批量删除</button>
   <table style="width: 500px;" class="table table-striped table-hover table-bordered">
  <thead>
  <tr>
   <th scope='col' width="25"><input type="checkbox" value="" name="selectall"></th>
   <th scope='col' width="80">ID</th>
   <th scope='col' >标题</th>
  </tr>
  </thead>
  <tbody>
  <tr>
   <td><input type="checkbox" value="10001"></td>
   <td>10001</td>
   <td >标题1</td>
  </tr>
  <tr>
   <td><input type="checkbox" value="10002"></td>
   <td>10002</td>
   <td >标题2</td>
  </tr>
  <tr>
   <td><input type="checkbox" value="10003"></td>
   <td>10003</td>
   <td >标题3</td>
  </tr>
  <tr>
   <td><input type="checkbox" value="10004"></td>
   <td>10004</td>
   <td >标题4</td>
  </tr>
  <tr>
   <td><input type="checkbox" value="10005"></td>
   <td>10005</td>
   <td >标题5</td>
  </tr>
  </tbody>
 </table>
 </div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.4/layer.min.js"></script>
<script>
 /*批量选中的效果*/
 $('input:checkbox[name="selectall"]').click(function(){
 if($(this).is(':checked')){
     $('input:checkbox').each(function(){
    $(this).prop("checked",true);
  });
    }else{
      $('input:checkbox').each(function(){
    $(this).prop("checked",false);
  });
    }
 });
 /*获取ids,批量删除*/
  function batch_del() {
    var ids = '';
    $('input:checkbox').each(function(){
      if(this.checked == true){
        ids += this.value + ',';
      }
    });
    //layer.alert(ids);return;
    //下面的ajax根据自己的情况写
    layer.confirm('批量删除后不可恢复,谨慎操作!', {icon: 7, title: '警告'}, function (index) {
      $.ajax({
        type: 'POST',
        url: '你的url地址?ids=' + ids,
        data: {"1": "1"},
        dataType: 'json',
        success: function (data) {
          if (data.code == 200) {
            $(obj).parents("tr").remove();
            layer.msg(data.message, {icon: 1, time: 1000});
          } else {
            layer.msg(data.message, {icon: 2, time: 3000});
          }
        },
        error: function (data) {
          console.log(data.msg);
        },
      });
    });
  }
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
jQuery操作cookie的示例代码
Jun 05 #jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 #jQuery
一文快速了解JQuery中的AJAX
May 31 #jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 #jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
You might like
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
原生JS轮播图插件
2017/02/09 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python3使用requests发闪存的方法
2016/05/11 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
英语一分钟演讲稿
2014/04/29 职场文书
公司更名通知函
2015/04/24 职场文书