表单的地址联动添加~删除

最新推荐文章于 2021-06-09 13:20:24 发布

fairy_414

最新推荐文章于 2021-06-09 13:20:24 发布

阅读量227

点赞数

本文链接：https://blog.csdn.net/xw_414/article/details/78987798

版权

     <!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>

<style>
        *{
            padding: 0px;
            margin: 0px;
            /*box-sizing: border-box;*/
        }
        .box{
            width: 800px;
            height: 500px;
            margin: 20px auto;
            padding: 10px;
        }
        .box table:nth-child(1){
            width: 780px;
            margin-bottom: 5px;
        }
        .box table:nth-child(1) tr td{
            height: 30px;
        }
        .box table:nth-child(1) tr td input{
            width: 84px;
            height: 25px;
        }
        .box table:nth-child(1) tr td select{
            width: 84px;
            height: 25px;
        }
        .box table:nth-child(1) tr td .btn{
            background: #99ff00;
            border-radius: 5px;
            border: 1px solid #666666;
        }
        .box>input{
            width: 70px;
            height: 28px;
            float: right;
            border-radius: 5px;
            border: 1px solid #666666;
            margin-left: 30px;
            margin-bottom: 5px;
        }
        .box>input:nth-child(3){
            background: green;
        }
        .box>input:nth-child(2){
            background: yellow;
        }
        .box .bg{
            width: 780px;
            margin-bottom: 5px;

}

注：隔行变色

        .box .bg tr:nth-child(1){
            background: gold;
        }
        .box .bg tr:nth-child(2n){
            background: greenyellow;
        }

       </style>
       <script type="text/javascript" src="../libs/jquery-1.11.0.min.js"></script>



   </head>

   <body>
       <div class="box">
           <table>
               <tr>

                   <td>姓名:<input type="text" id="name" /></td>
                   <td>性别：<select id="sex"><option>男</option><option>女</option></select></td>
                   <td>生日：<input type="text" id="happyday" /></td>
                   <td>地址：
                       <select id="city">
                           <option value="0">北京</option>
                           <option value="1">山西</option>
                       </select>

                       <select id="addr1">
                       </select>
                   </td>

                   <td><input type="button" οnclick="add()" value="添加" class="btn"></td>
                  </tr>
           </table>

           <hr />

           <input type="button" οnclick="delAll()" value="批量删除" />
           <input type="button" οnclick="che()" value="全选/反选" />
        <table border="1" cellspacing="0" cellpadding="0" class="bg">

           <tr>
                <td><input type="checkbox" οnclick="cheAll()" id="che"></td>
                <td>姓名</td>
                <td>性别</td>
                <td>生日</td>
                <td>住址</td>
                <td>操作</td>
            </tr>
        </table>
    </div>
   </body>
   <script type="text/javascript">

   //实现城市的二级联动
       $(function() {

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

           var addr2 = [
               ["北京", "西二旗"],
               ["临汾", "运城", "侯马", "平遥"]
           ];

           for(var i = 0; i < addr2[city].length; i++) {

               var op = $("<option></option>");

               op.text(addr2[city][i]);

               $("#addr1").append(op);

           }

           $("#city").change(function() {

               city = $(this).val();

               $("#addr1").empty();

               for(var i = 0; i < addr2[city].length; i++) {

                   var op = $("<option></option>");

                   op.text(addr2[city][i]);

                   $("#addr1").append(op);

               }
           });

       });

      //添加的点击事件
       function add() {
           var b1 = false;
           var b2 = false;
           var name = $("#name").val(); //姓名
           var happyday = $("#happyday").val(); //出生日期
           var sex = $("#sex").val(); //性别
           var sel = $("#addr1").val(); //地址 --》市区
           var cs = $("#city option:selected").html();

           //2.   完成用户添加功能。用户信息要求信息校验，用户名不小于3个字符且不大于30个字符，生日非空，住址实现两级联动，住址城市默认为北京，市区默认为西二旗，当用户改变城市时市区随之联动。
           if(name == "") {
               b1 = false;

           } else if(name.length < 3 || name.length > 30) {
               b1 = false;

           } else {
               b1 = true;
           }

           //判断出生日期非空
           if(happyday == "") {
               b2 = false;
           } else {
               b2 = true;
           }

             //判断变量为false时弹出信息错误，否则添加数据
           if(b1 == false || b2 == false) {
               alert("输入信息有误！");

           } else {
               $(".bg").append("<tr>" +
                   "<td><input type='checkbox' name='ck' ></td>" +
                   "<td>" + name + "</td>" +
                   "<td>" + sex + "</td>" +
                   "<td>" + happyday + "</td>" +
                   "<td>" + cs + "-" + sel + "</td>" +
                   "<td><input type='button' οnclick='return del(this)' value='删除'></td>" +
                   "</tr>")
           }

       }

       //删除时的弹窗提示
       function del(p) {
           var f = confirm("确认删除！！！");
           if(!f) {
               return;
           }
           p.parentNode.parentNode.remove();
       }

       //全选
       function cheAll() {
           var cek = $("#che")[0].checked();
           var ck = $("input[name='ck']");

           for(var i = 0; i < ck.length; i++) {
               ck[i].checked = cek;
           }
       }
        //全选反选
       function che() {
           var cks = document.getElementsByName("ck");
           for(var i = 0; i < cks.length; i++) {
               cks[i].checked = !cks[i].checked;
           }
       }
       //批量删除
       function delAll() {
           var ck = $("input:checked[name='ck']");
           if(ck.length == 0) {
               alert("请选择，然后选择删除");
               return;
           }

           var f = confirm("确认删除！！");
           if(!f){
               return;
           }
           for(var i = 0; i < ck.length; i++) {
               ck[i].parentNode.parentNode.remove();

           }
       }
   </script>
</html>

fairy_414

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单的地址联动添加~删除

*{ padding: 0px; margin: 0px; /*box-sizing: border-box;*/ } .box{ width: 800px; height: 500px; margin: 2
复制链接

扫一扫