在JQuery中动态添加表行

Question

我的表格如下：

<table id="table1">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>    

然后我有一个按钮：

<input id="btn2" value="add New row" type="button"/>

JQuery代码是这样的：

$('#btn2').click(function () {
    var v_html = $('#table1 tr').first();
    $('#table1').append(v_html);

});

它对我不起作用，因为第一行中的内容是动态的，我不能在JQuery中硬编码。我只想先复制<tr>并将其附加到表格的最后位置。

应该是这样的：

<table id="table1">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>        
    </tr>
</table>  

任何人都可以帮助我吗？

Answer 1

使用clone()复制行

$('#btn2').click(function () {
    var $row = $('#table1 tr').first().clone();
    $('#table1').append($row);

});