How to convert the following table to JSON with javascript?

Answer 1

Try this.

var myRows = { myRows: [] };

var $th = $('table th');
$('table tbody tr').each(function(i, tr){
    var obj = {}, $tds = $(tr).find('td');
    $th.each(function(index, th){
        obj[$(th).text()] = $tds.eq(index).text();
    });
    myRows.myRows.push(obj);
});
alert(JSON.stringify(myRows));

Working demo - http://jsfiddle.net/u7nKF/1/

Answer 2

Update: There's a slightly improved fork of the solution (below) on jsFiddle.

You just need to walk the DOM of your table reading it out... this is not even close to optimized but will give you the result you want. (jsFiddle)

// Loop through grabbing everything
var myRows = [];
var $headers = $("th");
var $rows = $("tbody tr").each(function(index) {
  $cells = $(this).find("td");
  myRows[index] = {};
  $cells.each(function(cellIndex) {
    myRows[index][$($headers[cellIndex]).html()] = $(this).html();
  });    
});

// Let's put this in the object like you want and convert to JSON (Note: jQuery will also do this for you on the Ajax request)
var myObj = {};
myObj.myrows = myRows;
alert(JSON.stringify(myObj));​

And the output...

{"myrows":[{"Column 1":"A1","Column 2":"A2","Column 3":"A3"},{"Column 1":"B1","Column 2":"B2","Column 3":"B3"},{"Column 1":"C1","Column 2":"C2","Column 3":"C3"}]}

Answer 3

I needed the same thing except with the ability to ignore columns, override values, and not be confused by nested tables. I ended up writing a jQuery plugin table-to-json:

https://github.com/lightswitch05/table-to-json

All you have to do is select your table using jQuery and call the plugin:

var table = $('#example-table').tableToJSON();

Here is a demo of it in action:

http://jsfiddle.net/nyg4z/27/

Answer 4

Here is a solution without jQuery, inspired by this article:

function tableToJson(table) { 
    var data = [];
    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.push(tableRow.cells[j].innerHTML);; 
        } 
        data.push(rowData); 
    } 
    return data; 
}

Answer 5

Here you go http://jsfiddle.net/Ka89Q/4/

var head = [],
    i = 0,
    tableObj = {myrows: []};
$.each($("#my_table thead th"), function() {
    head[i++] = $(this).text();
});

$.each($("#my_table tbody tr"), function() {
    var $row = $(this),
        rowObj = {};

    i = 0;
    $.each($("td", $row), function() {
        var $col = $(this);
        rowObj[head[i]] = $col.text();
        i++;
    })

    tableObj.myrows.push(rowObj);
});

alert(JSON.stringify(tableObj));

Answer 6

My version of it:

var $table = $("table"),
    rows = [],
    header = [];

$table.find("thead th").each(function () {
    header.push($(this).html());
});

$table.find("tbody tr").each(function () {
    var row = {};

    $(this).find("td").each(function (i) {
        var key = header[i],
            value = $(this).html();

        row[key] = value;
    });

    rows.push(row);
});

See the Fiddle.