Làm thế nào để chuyển đổi bảng sau sang JSON bằng javascript?

Question

Làm thế nào để làm cho bảng sau đây thành một chuỗi JSON trong 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> 

tôi muốn làm cho nó như vậy mà tôi có thể nhận được một chuỗi JSON trong một "myjson" biến mà có thể được sử dụng trong một yêu cầu POST hoặc GET yêu cầu:

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

cách tốt nhất là gì để hoàn thành việc này? (Lưu ý: Có thể có một số hàng khác nhau, tôi chỉ muốn trích xuất văn bản trong khi bỏ qua các thẻ khác bên trong bảng)

Answer 1

Cập nhật: Có một slightly improved fork of the solution (below) on jsFiddle.

Bạn chỉ cần đọc DOM bảng của mình để đọc nó ... đây là thậm chí không gần tối ưu hóa nhưng sẽ cung cấp cho bạn kết quả mong muốn. (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));​ 

Và đầu ra ...

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

Ở đây bạn đi 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

Hãy thử điều này.

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

bản demo làm việc - http://jsfiddle.net/u7nKF/1/

Answer 4

phiên bản của tôi về nó:

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

Xem Fiddle.

Answer 5

Tôi cần điều tương tự ngoại trừ khả năng bỏ qua các cột, ghi đè các giá trị và không bị nhầm lẫn bởi các bảng lồng nhau. Tôi đã kết thúc viết một plugin jQuery bảng-to-json:

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

Tất cả bạn phải làm là chọn bảng của bạn sử dụng jQuery và gọi các plugin:

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

Đây là một bản demo của nó hoạt động:

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