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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jquery实现简单每周轮换的日历
Sep 10 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
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
详解django三种文件下载方式
2018/04/06 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
python按照多个条件排序的方法
2019/02/08 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
应届生求职推荐信
2013/10/28 职场文书
外贸学院会计专业应届生求职信
2013/11/14 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
新年主持词
2014/03/27 职场文书
个人买房协议书范本
2014/10/06 职场文书
道士塔读书笔记
2015/06/30 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
海弦WR-800F
2022/04/05 无线电
4种方法python批量修改替换列表中元素
2022/04/07 Python