全选、反选、批量删除

最新推荐文章于 2018-12-21 18:10:19 发布

w98326angle

最新推荐文章于 2018-12-21 18:10:19 发布

阅读量546

点赞数

文章标签：全选反选批量删除 jQuery动态添加表格表单点击删除按钮删除一行

本文链接：https://blog.csdn.net/w98326angle/article/details/78519419

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   form{
    margin-bottom: 30px;
   }
   table{
    width: 800px;
    margin-top: 10px;
   }
   div{
    margin-left: 570px;
   }
  </style>
  <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
  <script>
   //二级联动
    $(function() {
         var cities = [
             ["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
             ["南京市","苏州市","扬州市","无锡市"],
             ["武汉市","襄阳市","荆州市","宜昌市","恩施市"],
             ["石家庄市","唐山市","保定市","邢台市","廊坊市"],
             ["长春市","吉林市","四平市","延边市"]
         ];

var $city = $("#city");

        // 获得代表省份的下拉列表
         $("#province").change(function() {
             // alert(this.value);
             // alert($(this).val());

            // 清空第二个列表中的内容
             $city.get(0).options.length = 0;
            var val = this.value;
             // 遍历并且判断
             $.each(cities, function(i, n) {
                 // 判断
                 if(i == val) {
                     $(n).each(function(j, m) {
                         // alert(j + " " + m);
                         $city.append("<option>" + m + "</option>");
                     });
                 }
             });
         });
     });


     $(function(){
       //点击添加按钮
       $("#btn").click(function(){
        //获取框中的值
        var $name=$("#name").val();
        var $sex=$("#sex").val();
        var $birth=$("#birth").val();
        var $pro=$("#province").find("option:selected").text();
        var $city=$("#city").val();

        //输入框判断
        if($name.length>=3&&$name.length<=30){
         if($birth!=""){
          //动态添加表格
          var tr=$("<tr></tr>");
          var chebox=$("<td><input type='checkbox' /></td>");
          var td1=$("<td></td>").html($name);
          var td2=$("<td></td>").html($sex);
          var td3=$("<td></td>").html($birth);
          var td4=$("<td></td>").html($pro+"-"+$city);
          var td5=$("<td><button>删除</button></td>");

          tr.append(chebox);
          tr.append(td1);
          tr.append(td2);
          tr.append(td3);
          tr.append(td4);
          tr.append(td5);

          var mtb=$("#mytb");
          mtb.append(tr);

         }else{
          alert("生日不能为空");
         }
        }else{
         alert("用户名格式不正确");
        }

        $("td button").unbind("click");
        //删除按钮删除
        $("td button").click(function(){
         if(confirm("是否确定删除？")){
          $(this).parent().parent().remove();
         }

        });

//全选
        $("#selAll").click(function () {
       $("td :checkbox,#che").prop("checked", true);
    });

        //反选
        $("#fanAll").click(function () {
        $("td :checkbox").each(function () {
            $(this).prop("checked", !$(this).prop("checked"));
        });
     allchk();
    });

        //批量删除
        $("#delAll").click(function(){
         if(confirm("确定删除?")){
          $('td input[type="checkbox"]:checked').parent().parent().remove();

}
});

}
        });

       });


     });

  </script>
</head>
<body>
  
  <form>
   姓名：<input type="text" id="name"/>
   性别：<select id="sex">
     <option>男</option>
     <option>女</option>
     </select>
   生日：<input type="text" id="birth"/>
   住址：<select id="province" name="province">
                     <option value="">-请选择-</option>
                     <option value="0">浙江省</option>
                     <option value="1">江苏省</option>
                     <option value="2">湖北省</option>
                     <option value="3">河北省</option>
                     <option value="4">吉林省</option>
                 </select>
        <select id="city">
        <option></option>
        </select>
        <input type="button" id="btn" value="添加"/>
  </form>
  
  <div>
   <input type="button" value="全选" id="selAll"/>
   <input type="button" value="反选" id="fanAll"/>
   <input type="button" value="批量删除" id="delAll"/>
  </div>

  
  <table border="1px">
   <thead>
    <tr>
     <td><input type="checkbox" id="che"/></td>
     <td>姓名</td>
     <td>性别</td>
     <td>生日</td>
     <td>住址</td>
     <td>删除</td>

    </tr>
    <tbody id="mytb">

    </tbody>
   </thead>
  </table>
</body>
</html>