jQuery實現動態添加標簽事件
本文實例為大傢分享瞭jQuery實現動態添加標簽事件的具體代碼,供大傢參考,具體內容如下
代碼:
<body> <table id="tableID" border="1" align="center" width="60%"> <tr> <th>用戶名</th> <th>密碼</th> <th>操作</th> </tr> <tbody id="tbodyID"></tbody> </table> <hr /> 用戶名: <input type="text" id="usernameID" /> 密碼: <input type="text" id="passwordID" /> <input type="button" value="增加" id="addID" /> </body> <script type="text/javascript"> //定位"增加"按鈕,同時添加單擊事件 $("#addID").click(function() { //獲取用戶名和密碼的值 var username = $("#usernameID").val(); var password = $("#passwordID").val(); //去掉二邊的空格 username = $.trim(username); password = $.trim(password); //如果用戶名或密碼沒有填 if (username.length == 0 || password.length == 0) { //提示用戶 alert("用戶名或密碼沒有填"); } else { //創建1個tr標簽 var $tr = $("<tr></tr>"); //創建3個td標簽 var $td1 = $("<td>" + username + "</td>"); var $td2 = $("<td>" + password + "</td>"); var $td3 = $("<td></td>"); //創建input標簽,設置為刪除按鈕 var $del = $("<input type='button' value='刪除'>"); //為刪除按鈕動態添加單擊事件 $del.click(function() { //刪除按鈕所有的行,即$tr對象 $tr.remove(); }); //將刪除按鈕添加到td3標簽中 $td3.append($del); //將3個td標簽依次添加到tr標簽中 $tr.append($td1); $tr.append($td2); $tr.append($td3); //將tr標簽添加到tbody標簽中 $("#tbodyID").append($tr); //清空用戶名和密碼文本框中的內容 $("#usernameID").val(""); $("#passwordID").val(""); } }); </script>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。