jQuery全选全不选批量删除

最新推荐文章于 2022-12-28 19:58:46 发布

未至D增援

最新推荐文章于 2022-12-28 19:58:46 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/lian895615/article/details/78722365

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
       <style>
           .table{
               width: 60%;
           }
       </style>
       <script>
           $(function(){
               $("#btn").click(function(){
                   selnull();
                   $("#table").show();
                   var flag=selname()&&selpwd()&&selemail();
                   if (flag) {
                       $("#table").append($("<tr class='tr'><td align='center'><input type='checkbox' name='box'/></td><td align='center'>"+$("#name").val()+"</td><td align='center'>"+$("#pwd").val()+"</td><td align='center'>"+$("#email").val()+"</td><td align='center'><input type='button' οnclick='fun(this)' value='删除'/></td></tr>"))
                   }
               })
               //批量删除
               $("#delbox").click(function(){
                   if ($("input[name='box']").length==0) {
                       alert("至少选中一个")
                       return;
                   }
                   $("input[name='box']:checked").each(function(){
                       $(this).parent().parent().remove();
                   })
                   //根据.tr判断当tr标签==0时隐藏表头
                   if ($(".tr").length==0) {
                       $("#table").hide();
                   }
               })
               //全选全不选
                   var flag=true;
           $("#boxAll").click(function(){
               var cd=$("input[type=checkbox]");
               for (var i=0;i<cd.length;i++) {
                   cd[i].checked=flag;
               }
               flag=!flag;
           })
           })
           function selname(){
               var name=$("#name").val();
               var zz=/^(.){1,6}$/;
               if (!zz.test(name)) {
                   $("#uname").html("用户名不能为空");
                   return false;
               }
               return true;
           }
           function selpwd(){
               var pwd=$("#pwd").val();
               var zz=/^(\w){6,12}$/;
               if (!zz.test(pwd)) {
                   $("#upwd").html("密码长度6-12位");
                   return false;
               }
               return true;
           }
           function selemail(){
               var email=$("#email").val();
               var zz=/^(\w)+@(\w)+(.(\w)+)+$/;
               if (!zz.test(email)) {
                   $("#uemail").html("邮箱格式有误");
                   return false;
               }
               return true;
           }
           function selnull(){
               $("#uname").html("");
               $("#upwd").html("");
               $("#uemail").html("");
           }
           function fun(obj){
               $(obj).parent().parent().remove();
               if ($(".tr").length==0) {
                   $("#table").hide();
               }
           }

       </script>
   </head>
   <body>
       <center>
           <form action="#" method="get">
               <table>
                   <tr>
                       <td>用户:</td>
                       <td><input type="text" id="name"/></td>
                       <td><span id="uname"></span></td>
                   </tr>
                       <tr>
                       <td>密码:</td>
                       <td><input type="text" id="pwd"/></td>
                       <td><span id="upwd"></span></td>
                   </tr>
                       <tr>
                       <td>邮箱:</td>
                       <td><input type="email" id="email"/></td>
                       <td><span id="uemail"></span></td>
                   </tr>
                       <tr align="center">
                       <td colspan="3"><input type="button" value="添加" id="btn"/><input type="button" value="批量删除" id="delbox"/></td>
                   </tr>
               </table>
           </form>
           <table border="1" cellpadding="0" cellspacing="0" class="table" id="table">
               <tr>
                   <th><input type="checkbox" id="boxAll"/></th>
                   <th>用户</th>
                   <th>密码</th>
                   <th>邮箱</th>
                   <th>操作</th>
               </tr>
           </table>
       </center>
   </body>
</html>