Jquery實現簡單的表格動態增減行功能

Jquery實現簡單的表格動態增減行功能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
用戶:<input type="text" id="user"/>
郵箱:<input type="text" id="mail"/>
手機:<input type="text" id="phone"/>
<br>
<button id="b1">添加</button><br>
<table border=1 id="table">
<tr><td>user</td><td>mail</td><td>phone</td><td>operation</td></tr>
<tr><td>zhangsan</td><td>aaa@qq.com</td><td>25652463</td><td><a href="##">delete</a></td></tr>
</table>
</body>
<script type="text/javascript">
 
$("#b1").click(function(){
var $user=$("#user");
var $mail=$("#mail");
var $phone=$("#phone");
 
//組裝對象
$tr=$("<tr></tr>");
$td1=$("<td></td>");
$td1.text($user.val());
 
$td2=$("<td></td>");
$td2.text($mail.val());
 
$td3=$("<td></td>");
$td3.text($phone.val());
 
$td4=$("<td></td>");
 
$href=$("<a></a>");
$href.attr("href","##");
$href.text("delete");
$td4.append($href);
 
$href.click(function(){
if(window.confirm("確定刪除?")){
  //這裡使用this表示當前事件綁定對象---? $(this)不能用$(href)代替,否則會認為每次都是最新對象,原有對象的行為不能保存
  $(this).parent().parent().remove();  
}else{
   return;
}
});
 
$("#table").append($tr);
    $tr.append($td1);
    $tr.append($td2);
    $tr.append($td3);
    $tr.append($td4);
});
 
</script>
</html>

這裡寫圖片描述

發佈留言