Как преобразовать следующую таблицу в JSON с javascript?

Question

Как сделать следующую таблицу в строку JSON в 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> 

Я хочу сделать это таким образом, что я могу получить строку JSON в переменную «myjson», которые могут быть использованы в запросе POST или GET запрос:

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

Update: Там в slightly improved fork of the solution (below) on jsFiddle.

Вам просто нужно пройти DOM своего стола, читая его ... это даже близко к оптимизированному, но даст вам результат, который вы хотите. (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));​ 

И выход ...

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

Держи 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

Попробуйте это.

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

Работа демо - http://jsfiddle.net/u7nKF/1/

Answer 4

Моя версия этого:

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

См Fiddle.

Answer 5

Мне было нужно то же самое, кроме как с возможностью игнорировать столбцы, переопределять значения и не путать вложенные таблицы. Я закончил тем, что писал плагин таблицы в-JSON JQuery:

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

Все, что вам нужно сделать, это выбрать таблицу с помощью JQuery и вызвать плагин:

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

Вот демо это в действии:

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