jQuery添加更多信息

彭帅哥

jQuery添加更多

用Myeclipse编写的，需要导入js库文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加用户</title>

<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
   <script type="text/javascript">
       $(function(){
           //点击事件
           $("#addUser").click(function(){
               //alert("adsfa");
               //获得用户输入的信息
               var name = $("#name").val();
               var email = $("#email").val();
               var tel = $("#tel").val();

               /*
                   <tr>
                       <td>张三</td>
                       <td>iotek@as.com</td>
                       <td>1111111</td>
                       <td><a href="deleteEmp?name=zs">Delete</a> </td>
                   </tr>
               */

               //创建td
               var $tdName = $("<td>"+name+"</td>");

               var $tdEmail = $("<td/>");
               $tdEmail.text(email);

               var $tdTel = $("<td>"+tel+"</td>");

               var $tdDelete = $("<td/>");
               var $a = $("<a>"+"Delete"+"</a>");
               $a.prop("href","deleteEmp?name="+name);
               $tdDelete.append($a);

               //创建tr
               var $tr = $("<tr></tr>");
               $tr.append($tdName).append($tdEmail).append($tdTel).append($tdDelete);
               //把tr添加到tBody中
               $("#tbody").append($tr);

               //超连接点击删除
               $a.click(function(){
                   return deleteTr($a);
               });
           });

           function deleteTr($a){
               //弹出一个提示对话框
               var name = $a.parent().parent().children().eq(0).text();
               //alert(name);
               var flag = window.confirm("是否要删除："+name);

               //如果是真，删除tr
               if(flag){
                   //删除tr
                   $a.parent().parent().remove();
                   alert(name+"已被删除");
                   return false;
               }else{
                   return false;
               }
           }
       });

   </script>
</head>
<body>
   <center>
       <br/>
       <br/>
       <br/>
       添加用户
       <br/><br/>
       姓　　名：<input type="text" name="name" id="name">
       email：<input type="text" name="email" id="email">
       电　　话：<input type="tel" name="tel" id="tel"><br/>
       <br/>
       <button id="addUser">提交</button>
       <br/>
       <br/>
       <br/>
       <hr/>
       <br/>
       <br/>
       <table id="usertable" border="1" cellpadding="10" cellspacing="0">
           <thead>
               <tr>
                   <th>姓名</th>
                   <th>email</th>
                   <th>电话</th>
                   <th>删除</th>
               </tr>
           </thead>
           <tbody id="tbody">
               
           </tbody>
       </table>
   </center>
</body>
</html>

秒客网

jQuery添加更多信息

相关文章