您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)使用jQuery和ajax怎么實(shí)現(xiàn)批量刪除功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
完整代碼如下:
<!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 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' >標(biāo)題</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" value="10001"></td> <td>10001</td> <td >標(biāo)題1</td> </tr> <tr> <td><input type="checkbox" value="10002"></td> <td>10002</td> <td >標(biāo)題2</td> </tr> <tr> <td><input type="checkbox" value="10003"></td> <td>10003</td> <td >標(biāo)題3</td> </tr> <tr> <td><input type="checkbox" value="10004"></td> <td>10004</td> <td >標(biāo)題4</td> </tr> <tr> <td><input type="checkbox" value="10005"></td> <td>10005</td> <td >標(biāo)題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根據(jù)自己的情況寫 layer.confirm('批量刪除后不可恢復(fù),謹(jǐn)慎操作!', {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>
關(guān)于使用jQuery和ajax怎么實(shí)現(xiàn)批量刪除功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。