首页 > 代码库 > jquery添加用户 事例
jquery添加用户 事例
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 6 </head> 7 <body> 8 <table id="tableID" border="1" align="center" width="60%"> 9 <thead>10 <tr> 11 <th>用户名</th>12 <th>密码</th>13 <th>操作</th>14 </tr>15 </thead>16 <tbody id="tbodyID">17 <!-- 动态增加行 -->18 </tbody>19 </table>20 <hr/>21 用户名：<input type="text" id="usernameID"/>22 密码： <input type="text" id="passwordID"/>23 <input type="button" value="增加" id="addID"/>24 </body>25 <script type="text/javascript">26 $("#addID").click(function(){27 //获取用户名和密码28 var username = $("#usernameID").val();29 var password = $("#passwordID").val();30 //去空格31 username = $.trim(username);32 password = $.trim(password);33 //判断34 if(username!=null && password!=null && username.length>0 && password.length>0){35 //创建tr对象36 var $tr = $("<tr></tr>")37 //创建3个td对象38 var $td1 = $("<td>" + username + "</td>");39 var $td2 = $("<td>" + password + "</td>");40 var $td3 = $("<td></td>");41 //创建按钮42 var $delButton = $("<input type=‘button‘ value=http://www.mamicode.com/‘删除‘>");43 44 //将按钮添加到td对象，形成父子关系45 $td3.append($delButton);46 //为按钮添加单击事件47 $delButton.click(function(){48 $tr.remove();49 });50 //将td对象添加到tr对象，形成父子关系51 $tr.append($td1);52 $tr.append($td2);53 $tr.append($td3);54 //将tr对象添加到tbody对象，形成父子关系55 $("#tbodyID").append($tr);56 //清空原用户名和密码框57 $("#usernameID").val("");58 $("#passwordID").val("");59 }else{60 window.alert("用户名和密码必填"); 61 }62 });63 </script>64 </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。