Angular Table Sorting

by freedawirl

HTML

<button class="addTable" data-table-no="#tbl_p2">Add table</button>
<div>Table 1
    <table id='tbl_p2'>
        <tbody>
            <tr>
                <td>
                    <input type='checkbox' id='r1c1' />
                </td>
                <td>
                    <input type='text' id='r1c2' />
                </td>
                <td>
                    <input type='text' id='r1c3' />
                </td>
                <td>
                    <input type='text' id='r1c4' placeholder='blur here should...' />
                </td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' id='r2c1' />
                </td>
                <td>
                    <input type='text' id='r2c2' />
                </td>
                <td>
                    <input type='text' id='r2c3' />
                </td>
                <td>
                    <input type='text' id='r2c4' placeholder='blur here should...' />
                </td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' id='r3c1' />
                </td>
                <td>
                    <input type='text' id='r3c2' placeholder='...take you here' />
                </td>
                <td>
                    <input type='text' id='r3c3' />
                </td>
                <td>
                    <input type='text' id='r3c4' />
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div>Table 2
    <table id='tbl_p5'>
        <tbody>
            <tr>
                <td>
                    <input type='checkbox' id='r1c1' />
                </td>
                <td>
                    <input type='text' id='r1c2' />
                </td>
                <td>
                    <input type='text' id='r1c3' />
                </td>
                <td>
                    <input type='text' id='r1c4' placeholder='blur here should...' />
               ...

JavaScript

$(document).on("blur", "table tr:not(tr:last-child) td:last-child input[type='text']:visible", function (event) {
    console.log('blur');
    $("tr:last input[type='text']:first", $(event.target).parents('table').get(0)).focus();
});

// Now add rows if buttons clicked - simulating dynamic adding of a table.
$('.addTable').click(function (event) {
    var tbl = $("#tbl_p5").parent().clone(true)
    tbl.insertAfter("div:last")
    $("table:last").attr("id", "tbl_ukalk")
});