jQuery Table Factory

A function for generating a table with jQuery from a list of data.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="content" class="well">
    <h4>jtable factory</h4>
</div>

JavaScript

var headers = ['', '', ''];
var rows = [
   [20, 30, 50],
   [8, 13, 21],
   [120, -19, 101],
   [120, -19]
];

function main() {
    var t = jtable('jtable', headers, rows);
    t.addClass('table');
    $('#content').append(t);
}


function jtable(id, headers, rows) {
    var table = $('<table />').attr('id', id);
    var tbody = $('<tbody />');
    
    // header row
    var th_cells = [];
    jQuery.each(headers, function() {
        var header = this.toString();
        var th = jth(header);
        th_cells.push(th);
    });
    var tr_th = jtr(th_cells);
    tbody.append(tr_th);
    
    // data rows
    jQuery.each(rows, function(i) {
        var row_cells = this;
    
        // zip headers to data
        var td_list = [];
        jQuery.each(row_cells, function(i) {
            var html = this;
            var header = 'jtd-' + headers[i].toString().replace(' ', '-');
            var td = jtd(html, header);
            td_list.push(td);
        });
        
        var tr = jtr(td_list);
        tbody.append(tr);
    });
    
    table.append(tbody);
    return table;
}

function jtr(td_list, tr_class) {
    var tr = $('<tr />');
    
    jQuery.each(td_list, function() {
        var td = $(this);
        tr.append(td);
    });
    
    if ( tr_class ) {
        tr.addClass(tr_class);
    }
    
    return tr;
}

function jtd(html, td_class) {
    var td = $('<td />').html(html.toString());
    
    if ( td_class ) {
        td.addClass(td_class);
    }
    
    return td;
}

function jth(html, th_class) {
    var th = $('<th />').html(html.toString());
    
    if ( th_class ) {
        th.addClass(th_class);
    }
    
    return th;
}

main();