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

来源：互联网发布：java redis分布式锁编辑：程序博客网时间：2024/05/18 16:13

<!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>

    <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 style="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>

阅读全文

0 0