表单验证+二级联动+添加+全选/反选+删除

来源：互联网发布：人工智能杂志中文编辑：程序博客网时间：2024/05/28 16:27

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           .botn {
               width: 80px;
               height: 30px;
               background-color: greenyellow;
               border: 1px solid black;
               border-radius:5px ;
           }
           td{
               border: 1px solid black;
           }
           span {
               color: red;
           }
           .quan{
               margin-top: 20px;
               margin-left: 450px;
               height: 25px;
               background-color:yellow;
               border: 1px solid black;
               border-radius:5px ;
           }
           .pi{
               margin-top: 20px;
               height: 25px;
               background-color:red;
               border: 1px solid black;
               border-radius:5px ;
           }
       </style>
       <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
       <script>
           function btn(){
               var flag1 = false;
               var name = $("#name").val();
               if(name.length < 3 || name.length > 30) {
                   $("#sname").html("用户名不小于3个字符且不大于30个字符")
                   flag1 = false;
               } else {
                   $("#sname").html("")
                   flag1 = true;
               }
               var flag2 = false;
               var birth = $("#birth").val();
               if(birth.length == 0) {
                   $("#sbirth").html("生日不能为空")
                   flag2 = false;
               } else {
                   $("#sbirth").html("")
                   flag2 = true;
               }

               if(flag1 && flag2) {
                   var name = $("#name").val();
                   var sex = $("#sex").val();
                   var birth=$("#birth").val();
                   var province=$("#province").find("option:selected").text();
                   var city=$("#city").find("option:selected").text();

                   var tr=$("<tr></tr>")
                   var td=$("<td> <input type='checkbox' name='ck'/></td>")
                   var td1=$("<td></td>").html(name);
                   var td2=$("<td></td>").html(sex);
                   var td3=$("<td></td>").html(birth);
                   var td4=$("<td></td>").html(province+"-"+city);
                   var td6=$("<td><button>删除</button></td>");
                   tr.append(td);
                   tr.append(td1);
                   tr.append(td2);
                   tr.append(td3);
                   tr.append(td4);
                   tr.append(td6);
                   $("table").append(tr);

                   $("table tr:odd").css("background","#999999");
                   $("table tr:even").css("background","#eeeeee");
                   $("button").unbind("click");
                   $("button").click(function(){
                       var shanchu=window.confirm("是否删除"+name);
                       if(shanchu){
                           $(this).parent().parent().remove();
                           var success=window.confirm("删除成功");
                           $("table tr:odd").css("background","#999999");
                           $("table tr:even").css("background","#eeeeee");
                       }else{

                           return false;
                       }

                   });
               }
           }

               //城市二级联动


           var citys = new Array(); //一个二维数组，用于存储省市，依次对应
           citys[1] = new Array("西二旗", "海淀");
           citys[2] = new Array("中牟", "新区");
           citys[3] = new Array("固安", "衡水");

           function change(value) {
               document.getElementById("city").options.length = 0;
               for(
                   var m = 0; m < citys[value].length; m++) {
                   var o = document.createElement("option");
                   var node = document.createTextNode(citys[value][m] + "");
                   o.appendChild(node);
                   document.getElementById("city").appendChild(o);

               }
           }

       </script>
       <script>
           function ckAll(){
                   var cks=document.getElementsByName("ck");
                   for(var i=0;i<cks.length;i++){
                       cks[i].checked=!cks[i].checked;
                   }

               }
           function delAll(){
                       var len=$("input[name='ck']:checked");
                       if(len.length==0){
                           alert("请选择要删除的数据");

                       }else{
                           $(len).parent().parent().remove();
                       }
                   }
       </script>
   </head>

   <body>
       <form>
           姓名：<input type="text" id="name" /><span id="sname"></span>
           性别：<select id="sex">
               <option checked="checked">男</option>
               <option>女</option>
               </select>
           生日：<input type="text" id="birth" /><span id="sbirth"></span>
           住址：<select class="se1" id="province" onchange="change(this.value)">
                   <option value="1" checked="checked">北京</option>
                   <option value="2">郑州</option>
                   <option value="3">河北</option>
               </select>
               <select class="se2" id="city">
                   <option value="0" checked="checked">西二旗</option>
               </select>
           <input class="botn" type="button" onclick="btn()" value="添加" /><br />
           <input class="quan" type="button" onclick="ckAll()" value="全选/反选" />
           <input class="pi" type="button" onclick="delAll()" value="批量删除" />
       </form>
       <table style="width: 600px;border:1px solid black;margin-top: 15px;" cellspacing="0px" cellpadding="5px">
           <tr style="background-color: #999999">
               <td><input type="checkbox" /></td>
               <td>姓名</td>
               <td>性别</td>
               <td>生日</td>
               <td>住址</td>
               <td>删除</td>

           </tr>

       </table>
   </body>

</html>

阅读全文

0 0