您的位置：首页 > 其它

二级联动添加表格及删除按钮弹出对话框

2017-11-12 15:00 417 查看

<!DOCTYPE html>

<html>
<head>

  <meta charset="utf-8" />

  <title></title>

  <script src="js/jquery-1.11.1.min.js"></script>

  <script>

   var flag = true;

   $(function() {

    $("#name").blur(function() {

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

     var sp = $("#sp1");

     if(name.length < 3 || name.length > 4) {

      sp.text("格式不正确");

      flag = false;

     } else {

      sp.text("√");

      flag = true;

     }

    });

    $("#mail").blur(function() {

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

     var sp2 = $("#sp2");

     if(mail.match("@")) {

      sp2.text("√");

      flag = true;
     } else {

      sp2.text("格式不正确");

      flag = false;

     }

    });

    $("#tel").blur(function() {

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

     var sp3 = $("#sp3");

     if(tel.length < 8 || tel.length > 11) {
      sp3.text("格式不正确");

      flag = false;

     } else {

      sp3.text("√");

      flag = true;

     }

    });
    $("#btn").click(function() {

     if(flag) {

      //获取表格

      //         var tab=document.getElementById("tab");

      //         var name=document.getElementById("name").value;

      //         var mail=document.getElementById("mail").value;

      //         var tel=document.getElementById("tel").value;

      //         var sheng=document.getElementById("sheng").value;

      //         var city=document.getElementById("city").value;

      //

      //         var mtr=document.createElement("tr");

      //         var mtd1=document.createElement("td");

      //         var mname=document.createTextNode(name);

      //         mtd1.appendChild(mname);

      //

      //         var mtd2=document.createElement("td");

      //         var mmail=document.createTextNode(mail);

      //         mtd2.appendChild(mmail);

      //

      //         var mtd3=document.createElement("td");

      //         var mtel=document.createTextNode(tel);

      //         mtd3.appendChild(mtel);

      //

      //         var mtd4=document.createElement("td");

      //         var cheng=document.createTextNode(sheng);

      //         mtd4.appendChild(cheng);

      //

      //         var mtd5=document.createElement("td");

      //         var mcity=document.createTextNode(city);

      //         mtd5.appendChild(mcity);

      //         var mtd6=document.createElement("td");

      //         var btn=document.createElement("button");

      //         btn.innerText="删除";

      //         mtd6.appendChild(btn);

      //

      //            mtr.appendChild(mtd1);

      //            mtr.appendChild(mtd2);

      //            mtr.appendChild(mtd3);

      //            mtr.appendChild(mtd4);

      //            mtr.appendChild(mtd5);

      //            mtr.appendChild(mtd6);

      //            tab.appendChild(mtr);

      var tab = $("#tab");

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

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

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

      var sheng = $("#pro").val();

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

      //创建tr

      var mtr = $("<tr></tr>");

      var mtd1 = $("<td>" + name + "</td>");

      var mtd2 = $("<td>" + mail + "</td>");

      var mtd3 = $("<td>" + tel + "</td>");

      var mtd4 = $("<td>" + sheng + "</td>");

      var mtd5 = $("<td>" + city + "</td>");

      var mtd6 = $("<td><button>删除</button></td>");

      mtr.append(mtd1);

      mtr.append(mtd2);

      mtr.append(mtd3);

      mtr.append(mtd4);

      mtr.append(mtd5);

      mtr.append(mtd6);

      tab.append(mtr);

                           //解除每一次添加绑定的点击事件

      //$("button").unbind("click");

      //点击删除按钮

      $("button").click(function() {

         //弹出confirm确定及取消的对话框

       var conn = confirm("是否删除");

       //默认为true

       if(conn) {

          //移除

        $(this).parent().parent().remove();

       }

       //取消

        conn.cancel();







      });

     }

    });

    //创建数组

    var shengfen=["北京","河北","山东"];

    //二级数组

       shengfen["北京"]=["昌平","大兴","海淀"];

       shengfen["河北"]=["石家庄","沧州","廊坊"];

        shengfen["山东"]=["济南","德州","青岛"];

        //当点击省份中的某一个节点

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

     //删除城市列表中第一个optian节点的兄弟节点

     $("#shi").siblings().remove();



         //查找到省份联动显示的所有城市

         var sheng=$(this).val();

              //循环遍历省份下所有的城市

            for(var i=0;i<shengfen[sheng].length;i++){

                  //创建option节点

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

               //将选中的城市添加到option中

               op.html(shengfen[sheng][i]);

               //将option添加父节点

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

            }



     })

   })

  </script>

</head>
<body>

  <form>





   <table>
    <tr>

     <td colspan="2" style="text-align: center;">

      <h2>添加用户</h2></td>

    </tr>

    <tr>

     <td>姓名:</td>

     <td><input type="text" placeholder="请输入用户名" id="name" /></td>

     <td><span id="sp1">



    </span></td>

    </tr>

    <tr>

     <td>emali:</td>

     <td><input type="text" placeholder="请输入邮箱" id="mail" /></td>

     <td><span id="sp2">



    </span></td>

    </tr>

    <tr>

     <td>电话:</td>

     <td><input type="number" placeholder="请输入电话" id="tel" /></td>

     <td><span id="sp3">



    </span></td>

    </tr>

    <tr>

     <td>省份:</td>

     <td>

      <select st
4000
yle="width: 150px;" id="pro">

       <option>请选择省份</option>

       <option value="北京">北京</option>

       <option value="河北">河北</option>

       <option value="山东">山东</option>

      </select>

     </td>





    </span></td>

    </tr>

    <tr>

     <td>城市:</td>

     <td>

      <select style="width: 150px;" id="ct">

       <option id="shi">请选择城市</option>

      </select>

     </td>

    </tr>

    <tr>

     <td colspan="2" style="text-align: center;"><input type="button" id="btn" value="添加" /></td>

    </tr>

   </table>

</form>

   <table id="tab" border="1px" style="width: 300px; text-align: center;">

    <tr>

     <td>姓名</td>

     <td>emali</td>

     <td>电话</td>

     <td>省份</td>

     <td>城市</td>

     <td>操作</td>

    </tr>

   </table>



</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航