¿Cómo convertir la siguiente tabla a JSON con javascript?

Question

¿Cómo hacer la siguiente tabla en una cadena JSON en jquery/javascript?

<table> 
    <thead> 
    <tr> 
     <th>Column 1</th> 
     <th>Column 2</th> 
     <th>Column 3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>A1</td> 
     <td>A2</td> 
     <td>A3</td> 
    </tr> 
    <tr> 
     <td>B1</td> 
     <td>B2</td> 
     <td>B3</td> 
    </tr> 
    <tr> 
     <td>C1</td> 
     <td>C2</td> 
     <td>C3</td> 
    </tr> 
    </tbody> 
</table> 

quiero que sea tal que pueda obtener una cadena JSON en un "myjson" variable que podría ser utilizado en una petición POST o GET solicitud:

{ 
    "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" 
    } 
    ] 
} 

¿Cuál es la mejor manera de ¿para lograr esto? (Nota: Puede ser un número variable de filas, sólo quiero para extraer el texto sin tener en cuenta las otras etiquetas dentro de la tabla)

Answer 1

Actualización: Hay una slightly improved fork of the solution (below) on jsFiddle.

Solo tiene que caminar el DOM de su mesa para leerlo ... esto es ni siquiera cerca de optimizado, pero le dará el resultado que desea. (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));​ 

Y la salida ...

{"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 2

Aquí tiene 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 3

probar esto.

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)); 

demostración de trabajo - http://jsfiddle.net/u7nKF/1/

Answer 4

Mi versión de la misma:

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); 
}); 

Véase el Fiddle.

Answer 5

Necesitaba lo mismo, excepto con la capacidad de ignorar columnas, anular valores y no confundirlas con tablas anidadas. Terminé de escribir un plugin de jQuery mesa-a-JSON:

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

Todo lo que tiene que hacer es seleccionar su mesa usando jQuery y llame al plugin:

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

Aquí es una demostración de en acción:

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