输入验证及增删改

最新推荐文章于 2021-12-07 16:58:35 发布

y126_Info

最新推荐文章于 2021-12-07 16:58:35 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/y126_Info/article/details/79093653

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
      <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
      <style type="text/css">
       span{
           color: red;
       }

       .tr1{
           /*color: blue;*/
           background: blue;
       }

       .tr2{
           /*color: greenyellow;*/
           background: greenyellow;
       }
      </style>
      <script type="text/javascript">

          var index=1;
          var uptr;
          var upindex;
          $(function(){
                 var flag1=flag2=flag3=false;
                 var name;
                 var pwd;
                 var email;
                 $("#name").blur(function(){
                  name=$("#name").val();
                  if(name=="" || name==null){
                     $("#span1").text("用户名不能为空").show();
                     flag1=false;
                  }else{
                     $("#span1").text("√").show();
                     flag1=true;
                  }
                 });

              $("#pwd").blur(function(){
                pwd=$("#pwd").val();
                 if(pwd.length<6){
                     $("#span2").text("密码不能少于六位").show();
                     flag2=false;
                 }else{
                     $("#span2").text("√").show();
                     flag2=true;
                 }
              });

              $("#email").blur(function(){
                 var exp=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                 email=$("#email").val();
                 if(exp.test(email)){
                    $("#span3").text("√").show();
                    flag3=true;
                 }else{
                     $("#span3").text("不符合邮箱规则").show();
                    flag3=false;
                 }
              });


              $("#add").click(function(){
                 if(flag1&&flag2&&flag3){
                     alert("添加成功！");
                     var tr;
                    if(index%2==0){
                       tr=$("<tr class='tr1'></tr>");
                     }else{
                     tr=$("<tr class='tr2'></tr>");
                     }

                  //创建单元格
                 var tCheckbox=$("<td><input type='checkbox' name='checkbox' οnclick='selectSingle()'/>");
                 var tid=$("<td>"+index+"</td>");
                 var tname=$("<td>"+name+"</td>");
                 var tpwd=$("<td>"+pwd+"</td>");
                 var temail=$("<td>"+email+"</td>");
                 var tCtrl=$("<td></td>");
                 var tbtn=$("<button id='del"+index+"'>删除</button>  "+"<button id='update"+index+"'>修改</button>");
                 tCtrl.append(tbtn);

                 tr.append(tCheckbox).append(tid).append(tname).append(tpwd).append(temail).append(tCtrl);

                 var tbody=$("#tbody");
                 tbody.append(tr);



                 $("#del"+index).click(function(){
                    var result= $(this).parent().parent().children().eq(0).children();
                  //alert(result);
                  if(result[0].checked){
                     //被选中，删除即可
                     $(this).parent().parent().remove();

                  }else{
                     alert("请选择！");
                  }

                 });

                     $("#update"+index).click(function(){
                    uptr=$(this).parent().parent();
                    var tds=uptr.children();
                    $("#name").val(tds[2].innerText);
                    $("#pwd").val(tds[3].innerText);
                    $("#email").val(tds[4].innerText);
                    });
                 index++;
                 }else{
                    alert("添加数据不符合要求！");
                 }

              });

             $("#updates").click(function(){
                   var nameV1 = $("#name").val();
                   var pwdV1 = $("#pwd").val();
                   var emailV1 = $("#email").val();
                   var tds = uptr.children();//得到tr里的所有td
                   tds[2].innerText = nameV1;//把新的名字填写到相应的td中
                   tds[3].innerText = pwdV1;
                   tds[4].innerText = emailV1;
               });

           //批量删除
           $("#deleteAll").click(function(){
               var size = $("#tbody :checked").length;
               if(size<=0){
                   alert("请先选择");
               }else{
                   if(window.confirm("确定要删除吗？")){
                       $("#tbody :checked").parent().parent().remove();
                   }
                  var allcheckbox = document.getElementById("allcheckbox");
                  allcheckbox.checked=false;
               }
           });
           });

           function allCheckboxOne(){
                    var names = document.getElementsByName("checkbox");
                    var allcheckbox = document.getElementById("allcheckbox");
                    for(var i = 0; i<names.length; i++){
                //当全选勾被选中时，遍历names集合，让每一个勾都设为true
                        if(allcheckbox.checked== true){
                            names[i].checked = true;
                        }else{
                            names[i].checked = false;
                        }
                    }
                }

                /*根据单个复选框的选择情况确定全选复选框是否被选中*/
                function selectSingle(){
                    var k=0;
                    var oInput=document.getElementsByName("checkbox");
                    for (var i=0;i<oInput.length;i++){
                       if(oInput[i].checked==false){
                          k=1;
                          break;
                        }
                    }
                    if(k==0){
                        document.getElementById("allcheckbox").checked=true;
                    }
                    else{
                        document.getElementById("allcheckbox").checked=false;
                    }
                }

      </script>
   </head>
   <body>
       <center>
              用户名:<input type="text" id="name"/><span id="span1"></span><br/><br/>
                 密码:<input type="password" id="pwd"/><span id="span2"></span><br/><br/>
             email:<input type="text" id="email"/><span id="span3"></span><br/><br/>
                   <input type="button" value="增加" id="add"/>  <input type="button" value="修改" id="updates"/>  <button id="deleteAll">全部删除</button><br/><br/>
             <table width="500" height="300" border="1" cellpadding="0" cellspacing="0">
              <tr>
                 <thead>
                     <tr>
                         <th><input type="checkbox" id="allcheckbox" οnclick="allCheckboxOne()"/></th>
                         <th>序号</th>
                         <th>姓名</th>
                         <th>密码</th>
                         <th>email</th>
                         <th>操作</th>
                     </tr>
                 </thead>
                  <tbody id="tbody">
                  </tbody>
              </tr>
             </table>
       </center>
   </body>
</html>