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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

赞 (0)

相关推荐

  • 基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能

    建议有js基础,了解jquery,thinkphp,废话不说多下面就上代码 <----HTML----> //thinkphp循环显示把data里fid赋予多选框 <volist name="data" id="vo"> <tr> <td><input type="checkbox" value="{$vo.fid}"/></td>//可在后面加td输入参

  • jQuery+css3实现Ajax点击后动态删除功能的方法

    jQuery+css3实现Ajax点击后动态删除功能的方法

    本文实例讲述了jQuery+css3实现Ajax点击后动态删除功能的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ajax动态删除一个方框,并带有动画缓冲效果,在google plus网站发现的特效,在此献丑模仿了一番,已基本与Google Plusp功能相同,你可在方框中加入一些内容,jquery插件选的版本是1.6.2,更高版本也是可以的. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv

  • PHP ajax+jQuery 实现批量删除功能实例代码小结

    PHP ajax+jQuery 实现批量删除功能实例代码小结

    目录结构 piliangshan.php <?php require_once './db_conn.php'; $sql = "select * from user"; $result = mysqli_query($conn, $sql); ?> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>全选演示</tit

  • JQuery DataTable删除行后的页面更新利用Ajax解决

    使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意: 复制代码 代码如下: var table = $('#sorting-advanced'); table.dataTable({ 'bServerSide': true, 'sAjaxSource': 'servlet/UserList<%=queryString%>', 'bProcessing': true, 'bStateSa

  • jquery ajax实现批量删除具体思路及代码

    jquery ajax实现批量删除具体思路及代码

    js页面jquery代码: 复制代码 代码如下: // JavaScript Document $(document).ready(function() { // 全选 $("#allChk").click(function() { $("input[name='subChk']").prop("checked",this.checked); }); // 单选 var subChk = $("input[name='subChk']&

  • PHP jQuery+Ajax结合写批量删除功能

    为了美观,我还是引入了bootstrap的模态框,我引入的是自己的数据库 library中的一张表 名为:maninfo表 是一张个人信息表 表的加载我就不写了,比较简单,  大概写一下需要的按钮和html部分就可以了 <button type="button" class="btn btn-primary" id="plscdz" >批量删除</button> 全选: <input type="check

  • jQuery之ajax删除详解

    首先看html界面的代码: <a href="javascript:;"  onclick="delete_order('<?php echo $item[order_id]; ?>')"><img src="images/admin/delete-icon.png" border="0" /></a>这个一个图片链接,表示删除.它并不跳转到某个界面,而是点击时出发click事件

  • jQuery通过ajax快速批量提交表单数据

    当表单数据项很多时,手动获取表单项的值将变得效率低下,结合jQuery提供的函数serialize(),我们可以实现快速获取数据并提交表单数据. 请看下面的表单: <form id="fm"> <table> <tr> <td>姓名</td> <td> <input type="text" name="name" /> </td> </tr>

  • jQuery ajax中使用confirm,确认是否删除的简单实例

    jQuery ajax 中使用confirm ,确认是否删除按钮 onclick="return confirm('确认删除?');" <script type="text/javascript"> $(function(){ $("#btnDelete").click(function(){ //var user8ID = $.trim( $('#user8ID').val() ); var statu = confirm(&quo

  • JQuery+ajax实现批量上传图片(自写)

    JQuery+ajax实现批量上传图片(自写)

    在网上搜索了一下,发现以jquery+ajax方式实现单张图片上传的代码是有的,但实现批量上传图片的程序却没搜索到,于是根据搜索到的代码,写了一个可以批量上传的.先看效果图 点击增加按钮,会增加一个选择框,如下图: 选择要上传的图片,效果图如下: 上传成功如下图: 下面来看代码:前台html主要代码: 复制代码 代码如下: <button id="SubUpload" class="ManagerButton" onClick="TSubmitUpl

  • 如何从jQuery的ajax请求中删除X-Requested-With

    X-Requested-With常用于判断是不是ajax请求 但是有时我们会有需要删除X-Requested-With的情况 下面介绍一种方式 js代码 复制代码 代码如下: $.ajax({ url: 'http://www.zhangruifeng.com', beforeSend: function( xhr ) { xhr.setRequestHeader('X-Requested-With', {toString: function(){ return ''; }}); }, succ

随机推荐