Question

JavaScript:

$('.addTable').live('click', function () {
    var appendTxt = "<table id='tab1'>  
                <tr><td><input type='text'   name='input1' /></td><td><input type='text'   name='input2' /></td>
                    <td><input type='button' class='addRow' value='Add Row' /></td></tr></table>";
    $("table:last").after(appendTxt);
});

$('.addRow').live('click', function () {
    var appendTxt = "<td><input type='text'name='input1' /></td><td><input 
                type='text'name='input2' /></td><td><input type='button' class='addRow' value='Add Row'/></td> ";
    $("tr:last").after(appendTxt);
});

HTML:

<table id="tab">
    <tr>
        <td>
            <input type="text" name="input1" />
        </td>
        <td>
            <input type="text" name="input2" />
        </td>
        <td>
            <input type="button" class="addRow" value="Add Row" />
        </td>
    </tr>
</table>

<input type="button" class="addTable" value="addTable" />

When I hit “add row” button, I get a new row dynamically. When I hit “add table” button I get a new table.

But after this when I hit “add row” in both new as well as old table, I get a row added in the last added table because I have put $("tr:last").after(appendTxt)
so it appends in the latest <tr> which is present in the latest table.

Is there a better way to do this so that when I hit “new table”, I can add a row to the respective tables?

Answer 1

After your comment above.

Change:

$("tr:last").after(appendTxt);  

To:

$(this).closest('table').find('tr:last').after(appendTxt);

I assume your Add Row button exists in each table where you add a new row.