轉錄-動態新增按鈕

上面几种方案可以说即便你没有用到jQuery库，你也能相对比较容易的实现。但这种方案相对依赖jQuery的程度更高。而且必须要求jQuery 1.2版以上。低版本jQuery需要插件。
上 面两个方案都是对删除函数动了很多脑筋，换了多种触发、绑定的方式。这个方案不同，可以与平时纯静态的元素一样在domready的时候绑定。但在我们添 加新行的时候我们改动一下，不再想上面那样拼接字符串来添加新行了。这回我们尝试使用复制DOM元素的方式。并且复制的时候连同绑定的事件一起复制，复制 完之后再用find之类的修改内部的元素。
同时，就像这个例子，如果你会把所有元素都删除光，那template这个模板是必须的，如果不会删光，那就未必需要用template了。为了防止被误删，此处我把template设了隐藏。
我使用了jQuery中特有的clone(true)

1. .template{display:none;}

1. <trclass="template">
2.            <td>这里是模板</td>
3.            <td><button class="del">删除</button></td>
4.        </tr>
5.        <tr>
6.            <td>这行原来就有</td>
7.            <td><button class="del">删除</button></td>
8.        </tr>
9.        <tr>
10.            <td>这行原来就有</td>
11.            <td><button class="del">删除</button></td>
12.        </tr>

1. jQuery(function($){
2.    //第五个表格的删除按钮事件绑定
3.     $("#table5 .del").click(function() {
4.         $(this).parents("tr").remove();
5.    });
6.    //第五个表格的添加按钮事件绑定
7.     $("#add5").click(function(){
8.         $("#table5>tbody>tr:eq(0)")
9.            //连同事件一起复制
10.             .clone(true)
11.            //去除模板标记
12.             .removeClass("template")
13.            //修改内部元素
14.             .find("td:eq(0)")
15.                 .text("新增行")
16.                 .end()
17.            //插入表格
18.             .appendTo($("#table5>tbody"))
19.    });
20. });

事件冒泡法
利用事件冒泡的原理，我们给这个按钮的祖先元素绑定事件处理函数。
然后通过event.target这个对象来判断，这个事件是不是我们要找的对象触发的。
通常可以利用一些DOM属性，比如event.target.className、event.target.tagName等之类的来判断。

1. <td><buttonclass="del">删除</button></td>

1. jQuery(function($){
2.    //第四个表格的删除按钮事件绑定
3.     $("#table4").click(function(e) {
4.        if (e.target.className=="del"){
5.             $(e.target).parents("tr").remove();
6.        };
7.    });
8.    //第四个表格的添加按钮事件绑定
9.     $("#add4").click(function(){
10.         $("#table4>tbody").append('<tr><td>新增行</td><td><button class="del">删除</button></td></tr>')
11.    });
12. });