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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现计算器功能
Oct 19 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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python非递归全排列实现方法
2017/04/10 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
浙大毕业生自荐信
2014/01/26 职场文书
旅游活动总结
2014/08/27 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
五年级小学生评语
2014/12/26 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
MySql新手入门的基本操作汇总
2021/05/13 MySQL