jquery 的使用（demo）时间日期不为空全选添加删除的判断和操作（失焦方法）

最新推荐文章于 2022-03-02 14:12:07 发布

Jonly_W

最新推荐文章于 2022-03-02 14:12:07 发布

阅读量325

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/Jonly_W/article/details/78996968

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
       <script>
       //验证账号不能为空
              function isnull(){

               var v=$("#name").val();
               var va=v.length;
               if(va>=3&&va<=10){
                  return true;
               }else{
                  alert("用户名长度不够")
                  return false;
               }

              }
           //生日日期不能为空
              function isdate(){
              var v=$("#sheng").val()
              if(v!=null&&v.trim()!=""){
                 return true;
              }else{
                 alert("生日日期不能为空")
                 return false;
              }

           }
              //主验证
              function yan(){
               return isnull()&&isdate();
              }

              //添加的方法
              var index=1;
           function add(){
               if(yan()){
                   var _tr;

                   //改变每个tr 的颜色
                   if(index%2==0){
                       _tr="<tr align='center' class='tr1' >"
                   }else{
                       _tr="<tr align='center' class='tr2' >"
                   }


                   //获取到值
                   var v=$("#sel option:selected").val()
                   var newname=$("#name").val()
                   var newsheng=$("#sheng").val()

                   $(_tr+"<td><input type='checkbox' /></td><td>"+newname+"</td><td>"+v+"</td><td>"+newsheng+"</td><td><input type='button' value='删除' id='sc"+index+"'/></td></tr>").appendTo("#myta")
                   //删除操操作
                   $("#sc"+index).click(function(){
                      $(this).parent().parent().remove()
                   })
                   //全选
                   $("#ch").click(function(){
                         $("input[type='checkbox']").attr("checked",this.checked)
                      })
                   index++;

               }


           }
           //时间
           function settime(){
               var v=new Date();
               var va=v.toLocaleString();
               $("#tim").val(va);
           }
           //1秒后重新调用方法
           setInterval(settime,1000);

       </script>
      
       <style>

           .tr1{
               background-color: red;
           }
           .tr2{
               background-color: goldenrod;
           }

       </style>
   </head>
   <body>
       <center>
           <input type="text" id="tim"/><br />

       姓名：<input type="text" id="name" οnblur="isnull()"/>   
       性比：<select id="sel">
           <option value="男" selected="true">男</option>
           <option value="女">女</option>
       </select>  
       生日：<input type="date" id="sheng" οnblur="isdate()" />  
       <input type="button" value="添加" οnclick="add()" style="background-color: lawngreen; width:70px; height: 30px;"/>
       <table border="1" width="500px" id="myta">

           <tr>
               <th><input type="checkbox" id="ch" /></th><th>姓名</th><th>性别</th><th>生日</th><th>删除</th>
           </tr>

       </table>
       </center>
   </body>
</html>

Jonly_W

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery 的使用（demo）时间日期不为空全选添加删除的判断和操作（失焦方法）

//验证账号不能为空 function isnull(){ var v=$("#name").val(); var va=v.length; if(va>=3&&va ret
复制链接

扫一扫