Add a table row dynamically in JQuery

My table looks like this:

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

then I have a button:

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

the JQuery code is like this:

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

});

It's not working for me, because the content in the first row is dynamic and I cannot hard code in the JQuery. I just want to copy first <tr> and append it to last position in the table.

It should be like this:

<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>  

Can anyone help me?

Answers 1

Related Articles