Table sort and add checkboxes

by doug65536

HTML

<button id="add">Add checkboxes</button>
<button id="rows">Add rows</button>

<table id="tab">
    <thead>
        <tr>
            <th>A column</th>
            <th>B column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>Z</td>
        </tr>
        <tr>
            <td>Z</td>
            <td>A</td>
        </tr>
        <tr>
            <td>D</td>
            <td>P</td>
        </tr>
    </tbody>
</table>

JavaScript

$(function () {
    $('#add').on('click', function () {
        $('#tab').find('tr').each(function () {
            var elem = $(this);
            var headers = elem.find('th');
            var chk = $('<input>').attr('type', 'checkbox');
            var cell = $('<td>').append(chk);
            elem.prepend(cell);
        });
    });
    
    $('#rows').on('click', function() {
        function make_cell(content) {
            return $('<td>').text(content).prop('outerHTML');
        }
        
        function make_row(cols) {
            var row = '';
            for (var i = 0; i < cols; ++i) {
                row += make_cell(String.fromCharCode(Math.random() * 26 + 65));
            }
            return $('<tr>').html(row).prop('outerHTML');
        }
        
        var rows = '';
        for (var i = 0; i < 1000; ++i) {
            rows += make_row(2);
        }
        
        $('#tab tbody').append(rows);
    });

    // Add sort click
    $('#tab').find('tr').find('th').each(function () {
        var cell = $(this);
        var content = $(this).contents();
        var link = $('<a>').attr('href', '#').data('sortcol', 1).append(content);
        cell.empty().append(link);
    });

    $('#tab thead tr th').each(function () {
        var link = $(this);
        var reverse = false;
        // up: &x2191; down: &x2193;
        link.on('click', function () {
            debugger;
            var cell = $(this).closest('th');
            var row = cell.closest('tr');
            var index = row.children().index(cell);
            var tablebody = row.closest('table').find('tbody');
            var rows = tablebody.children('tr').detach();
            rows.sort(function(a,b) {
                var ca = $(a).children('td').eq(index);
                var cb = $(b).children('td').eq(index);
                var ta = ca.text();
                var tb = cb.text();
                return ta < tb ? -1 : ta > tb ? 1 : 0;
            });
           ...