HTML Table to JSON

Solution 1:

function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
    }

    // go through cells
    for (var i=1; i<table.rows.length; i++) {

        var tableRow = table.rows[i];
        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {

            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;

        }

        data.push(rowData);
    }       

    return data;
}

Taken from John Dyer's Blog

Solution 2:

I was unhappy with all the solutions above and ended up writing my own jQuery plugin to accomplish this. It is very similar to the solution but accepts several options to customize the results, such as ignoring hidden rows, overriding column names, and overriding cell values

The plugin can be found here along with some examples if this is more what your looking for: https://github.com/lightswitch05/table-to-json

Solution 3:

try $("#"+tableID + " tr") instead.

Solution 4:

You should find this helpful: http://encosia.com/use-jquery-to-extract-data-from-html-lists-and-tables/