Generating Table Inside A Table Row Dynamically

I have a web application, which uses HTML generic control to generate tables. I have a button in each row created dynamically. My question is, how can I add a new table under the c

Solution 1:

Here is an example using jQuery, manipulating tables in pure JS in my experience is a bit clunky.

See on jsFiddle

HTML

<table><tr><td><buttonclass="add-table">Add table</button></td></tr><tr><td><buttonclass="add-table">Add table</button></td></tr></table>

jQuery

$(document).ready(function () {
    $('.add-table').click(function () {
        $(this).after('<table>\
            <tr>\
            <td>New table</td>\
            </tr>\
            </table>');
    });
});