如何使用javascript將下表轉換爲JSON？

Question

如何在jquery/javascript中將下表轉換爲JSON字符串？

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

我想讓它，這樣我可以在可以在POST請求中使用的變量「myjson」得到一個JSON字符串或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

更新：有一個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

我需要相同的東西，除了能夠忽略列，覆蓋值，而不會被嵌套表混淆。我最後寫一個jQuery插件表到JSON：

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

所有你需要做的使用jQuery的選擇表格並調用插件：

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

這裏是一個演示它在行動：

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