【八】jqeury之click事件[添加及刪除數據]
阿新 • • 發佈：2018-02-09
gpo utf 電話 列表 方式 3.1 rip 動態 utf-8
要求：1.添加數據顯示在下方列表。2.添加的數據可動態刪除。
界面顯示：
代碼：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-3.3.1.js"></script> <meta charset="UTF-8"> </head> <body> <h1>添加用戶</h1> 姓名：<input type="text" name="username" id="username"/> 電子郵件：<input type="text" name="email" id="email" /> 電話：<input type="text" name="phone" id="phone" /> <input type="button" value="提交" id="tijiao"> <br/><br/><br/><br/> <hr/> <table border="1px" width="400px" id="table_data"> <tr> <td>姓名</td> <td>電子郵件</td> <td>電話</td> <td></td> </tr> <tr> <td>test</td> <td>[email protected]</td> <td>15512341235</td> <td><a href="test.php"/>刪除</td> </tr> </table> <script type="text/javascript"> $("#tijiao").click(function(){ var user_name=$(‘#username‘).val(); var user_email=$(‘#email‘).val(); var user_phone=$(‘#phone‘).val(); // ****************一步到位法***************************** // 無法綁定刪除事件 $tr="<tr><td>"+user_name+"</td><td>"+user_email+"</td><td>"+user_phone+"</td><td><a href=‘test_del.php‘>刪除</a></td></tr>"; $("#table_data").append($tr); //****************方法二***************************** //1.先將tr變量append在table下 //2.在將每個元素的值（name、email、phone）添加到tr下 $tr=$("<tr></tr>"); $username=$("<td></td>"); $username.text(user_name); $email=$("<td></td>"); $email.text(user_email); $phone=$("<td></td>"); $phone.text(user_phone); // 給超鏈接綁定屬性 $del=$("<td></td>"); $del_a=$("<a></a>"); $del_a.text("刪除"); $del_a.attr("href","del.php?name=user_name"); $del.append($del_a); //將每個元素的值（name、email、phone）添加到tr下 $tr.append($username); $tr.append($email); $tr.append($phone); $tr.append($del); // 將tr變量append在table下 $("#table_data").append($tr); // 給超鏈接綁定屬性 $del_a.click(function(){ // 獲取姓名的方式一 // var b= window.confirm("確認要刪除？"+user_name); // 獲取姓名的方式二 var b=window.confirm($(this).parent().parent().children().eq(0).text()); if (b) { $(this).parent().parent().remove(); return false; }else{ return false; } }); }); </script> </body> </html>
【八】jqeury之click事件[添加及刪除數據]