Js实现批量操作、(批量删除)

在开发过程中批量操作是常有,其原理简单、你只要复制下面的代码就能实现你的功能:

<button type="button" class="" οnclick="del_amin()">批量删除</button> <table class="table"> <thead> <tr> <th><input type="checkbox" id="all" value=""></th> <th>第一列</th> <th>第二列</th> <th>第三列</th> <th></th>

</tr> </thead> <tbody>

<tr> <td><input type="checkbox" value="" name="id"></td> <td>1</td> <td>2</td> <td>3</td>

</tr> <tr> <td><input type="checkbox" value="" name="id"></td> <td>1</td> <td>2</td> <td>3</td>

</tr> <tr> <td><input type="checkbox" value="" name="id"></td> <td>1</td> <td>2</td> <td>3</td>

</tr> </tbody> </table>

</body> <script> var all_list=document.getElementById("all");//获取批量操作 标签 var id_list=document.getElementsByName("id");//获取勾选的标签 all_list.οnclick=function(){//勾选全选时 for(var i=0;i<id_list.length;i++){ //所有的选择框和全选一致 id_list[i].checked=all_list.checked; } }; //点击复选框 for(var i=0;i<id_list.length;i++){ id_list[i].οnclick=function(){ //判断是否全部选中,遍历集合 for(var j=0;j<id_list.length;j++){ if(id_list[j].checked==false){ all_list.checked=false; break; }else{ all_list.checked=true; } } }; } /*封面图-批量删除*/ function del_amin(){ var ids_list=""; var n=0; //拼接出一个名为ids_list的数组ids_list=1&ids_list=2&ids_list=3&ids_list=4…… for(var i=0;i<id_list.length;i++){ if(id_list[i].checked==true){//选中为true var id=id_list[i].value; if(n==0){ ids_list+="ids_list="+id; }else{ ids_list+="&ids_list="+id; } n++; } }

var r=confirm("是否确认删除?"); if(r==true){ //确认删除

var masige = { all_id :ids_list }; //Ajax 向后台提交数据 $.ajax({ type: "POST", url:你的url, data:masige, async: false, error: function(request) { }, success: function(data) { console.log(data); alert("删除成功"); //刷新当前页面 window.location.reload(); });

return true; } else{ //不删除 return false; } }

</sc>

样式虽丑、但功可用、渴望留言交流,你的问题。

经验分享 程序员 微信小程序 职场和发展