JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<table>
    <tr>
        <td>name</td>
        <td>addr</td>
        <td>phone</td>
    </tr>
    <tr id="controls">
        <td>
            <button data-action="after" type="button">Insert row after this button</button>
        </td>
        <td>
            <button data-action="before" type="button">Insert row before this button</button>
        </td>
        <td>
            <button data-action="end" type="button">Insert row at end of table</button>
        </td>
    </tr>
</table>

JavaScript

$(function () {
    var next_id = 1;
    $('table button').on('click', function (ev) {
        var item = $(ev.target);
        var action = item.data('action');

        var n = ++next_id;
        var newrow = $('<tr>');
        newrow.append($('<td>').text('test name ' + n));
        newrow.append($('<td>').text('test addr ' + n));
        newrow.append($('<td>').text('test phone ' + n));
        switch (action) {
            case 'before':
                newrow.insertBefore($('#controls'));
                break;
            case 'after':
                newrow.insertAfter($('#controls'));
                break;
            case 'end':
                $('table').append(newrow);
                break;
        }
    });
});