动态添加用户 实现代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 引入jquery开发包 --> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> $(function(){ // 提交按钮添加 click事件 $("#addBtn").click(function(){ // 获取form的值 var name = $("input[name='name']").val(); var email = $("input[name='email']").val(); var phone = $("input[name='phone']").val(); // 在table 中生成tr var tr = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='#' onclick='deleteItem(this);'>删除</a></td></tr>"); $("table").append(tr); // form重置，清除刚才表单填写的内容 $("form")[0].reset(); }); }); // 删除 function deleteItem(a){ // 删除 a 元素所在行 $(a).parents("tr").remove(); } </script> </head> <body> <div align="center"> <h3>添加用户</h3> <form> 姓名 <input type="text" name="name" /> 邮箱 <input type="text" name="email" /> 电话 <input type="text" name="phone" /> <br/> <input type="button" value="提交" id="addBtn" /> </form> <hr/> <table border="1"> <tr> <th>姓名</th> <th>email</th> <th>电话</th> <th>删除</th> </tr> </table> </div> </body> </html>
