jquery表单验证添加到表格再删除easyNew

来源：互联网发布：excel sql 编辑：程序博客网时间：2024/05/01 11:49

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../AngularJS库/angular.js" ></script>
       <script type="text/javascript" src="../AngularJS库/jquery-2.1.0.min.js" ></script>
       <script>
           $(function(){
               //给按钮添加点击事件
               $("#btn").click(function(){
                   //用户输入的信息
                   var name = $("input:eq(0)").val();
                   var email = $("input:eq(1)").val();
                   var tel = $("input:eq(2)").val();

                   var flag = true;
                   if(name==""||name==null){
                       flag = false;
                       alert("姓名不能为空");
                   }
                   if(email==""||email==null){
                       flag = false;
                       alert("email不能为空");
                   }else{
                       if(email.indexOf("@")==-1){
                           flag = false;
                           alert("email格式不合法");
                       }
                   }
                   if(tel==""||tel==null){
                       flag = false;
                       alert("tel不能为空");
                   }else{
                       //isNaN(tel) 判断输入的内容管是否为数字
                       var isNumber = isNaN(tel);
                       if(isNumber){
                           flag= false;
                           alert("tel必须为数字");
                       }
                   }

                   //判断flag
                   if(flag){
                       //alert("添加成功");
                       //创建单元格
                       var tdName = $("<td>"+name+"</td>");
                       var tdEmail = $("<td>"+email+"</td>");
                       var tdTel = $("<td>"+tel+"</td>");
                       var tdDelete = $("<td><a href='#'>删除</a></td>");

                       //将上面创建的单元格添加到到tbody里面
                       var tbody = $("#tbody");
                       //创建tr
                       var tr = $("<tr></tr>");
                       //在tr里面添加上面4个td
                       tr.append(tdName).append(tdEmail).append(tdTel).append(tdDelete);
                       //再在tbody里面添加tr
                       tbody.append(tr);

                       //删除的点击事件
                       $("a").click(function(){
                           //点击超链接,获取到当前超链接的父元素td的父元素tr,,然后删除tr这一行
                           var trDelete = $(this).parent().parent();
                           trDelete.remove();
                       });
                   }
               });
           });
       </script>
   </head>
   <body>
       <center>
           <h3>添加用户</h3>
           <form>
               姓名：<input type="text" />  
               email：<input type="text" />  
               电话：<input type="text" /><br /><br />
               <input type="button" id="btn" value="添加"/>

               <br /><br /><hr/><br /><br />

               <table border="1 solid blue" cellpadding="10" cellspacing="0">
                   <thead>
                       <tr>
                           <th>姓名</th>
                           <th>email</th>
                           <th>电话</th>
                           <th>操作</th>
                       </tr>
                   </thead>
                   <tbody id="tbody">

                   </tbody>
               </table>

           </form>
       </center>
   </body>
</html>

   </head>
   <body>
   </body>
</html>

阅读全文

0 0