jQuery array to HTML table.

readme.md

Usage

Jquery is required for this function.

The function above will turn and array into a html table with optional th, thead and tfoot elements. The returned data is a jquery object ready for appending or whatever you want to do.

It accepts a simple nested array as the first argument and an array of options as the second.

Example

http://jsfiddle.net/mjPsb/

var data = [
	['Name', 'Age', 'Email'],
	['John Doe', '27', '[email protected]'],
	['Jane Doe', '29', '[email protected]']
];

var table = arrayToTable(data, {
	thead: true,
	attrs: {class: 'table'}
})

$('body').append(table);

Produces this:

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>27</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Jane Doe</td>
            <td>29</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

Notes

• If you use this on a site wit untruested input you may want to change the .html() calls to .text() to the values will be escaped

arrayToTable.js

var arrayToTable = function (data, options) {

    "use strict";

    var table = $('<table />'),
        thead,
        tfoot,
        rows = [],
        row,
        i,
        j,
        defaults = {
            th: true, // should we use th elemenst for the first row
            thead: false, //should we incldue a thead element with the first row
            tfoot: false, // should we include a tfoot element with the last row
            attrs: {} // attributes for the table element, can be used to
        };

    options = $.extend(defaults, options);

    table.attr(options.attrs);

    // loop through all the rows, we will deal with tfoot and thead later
    for (i = 0; i < data.length; i = i + 1) {
        row = $('<tr />');
        for (j = 0; j < data[i].length; j = j + 1) {
            if (i === 0 && options.th) {
                row.append($('<th />').html(data[i][j]));
            } else {
                row.append($('<td />').html(data[i][j]));
            }
        }
        rows.push(row);
    }

    // if we want a thead use shift to get it
    if (options.thead) {
        thead = rows.shift();
        thead = $('<thead />').append(thead);
        table.append(thead);
    }

    // if we want a tfoot then pop it off for later use
    if (options.tfoot) {
        tfoot = rows.pop();
    }

    // add all the rows
    for (i = 0; i < rows.length; i = i + 1) {
        table.append(rows[i]);
    }

    // and finally add the footer if needed
    if (options.tfoot) {
        tfoot = $('<tfoot />').append(tfoot);
        table.append(tfoot);
    }

    return table;
};

['Name', 'Age', 'Email],

should be:
['Name', 'Age', 'Email'],

Nice lib, used it in my project after adding inputs to table cells, thanks!

I had no idea what that github notification was about at first.

Glad you found it useful!

Here's how it works in my project:
https://maksimkorzh.github.io/bmcp_js/ - click "Tune evaluation" button - it will then convert inner chess board array (part of it) to user input table so user can visually change values in array.

Video of how it works:
https://www.youtube.com/watch?v=E6lA_W8zGp4