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实现图片上传前本地预览
Apr 28 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php学习之 数组声明
2011/06/09 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
解析Python中的异常处理
2015/04/28 Python
python通过post提交数据的方法
2015/05/06 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python常用知识点汇总
2016/05/08 Python
对python函数签名的方法详解
2019/01/22 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
大学毕业生求职自荐书
2014/06/05 职场文书
政风行风整改方案
2014/10/25 职场文书
学校政风行风整改方案
2014/10/25 职场文书
店铺转让协议书
2014/12/02 职场文书
关于召开会议的通知
2015/04/15 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书