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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jquery插件实现轮播图效果
Oct 19 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
Firefox div高度自适应
2009/04/28 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
怎样自定义一个异常类
2016/09/27 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
工作违纪检讨书
2014/02/17 职场文书
打架检讨书2000字
2014/02/22 职场文书
会计核算科岗位职责
2014/03/19 职场文书
运动员代表致辞
2015/07/29 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技
html中两种获取标签内的值的方法
2022/06/16 jQuery