如何使用jQuery將HTML表轉換為Javascript對象

Question

我正在嘗試轉換此HTML表格：

碼：

<table id="students" border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr class="student">
            <td>Oscar</td>
            <td>23</td>
            <td>16.5</td>        
        </tr>
        <tr class="student">
            <td>Antonio</td>
            <td>32</td>
            <td>14</td>        
        </tr>
        <tr class="student">
            <td>Jessica</td>
            <td>21</td>
            <td>19</td>        
        </tr>
    </tbody>
</table>​​​​​​

使用jQuery進入javascript對象：

var tbl = $('table#students tr').map(function() {
  return $(this).find('td').map(function() {
    return $(this).text();
  }).get();
}).get();

上面的代碼將輸出以下數組：

["Oscar", "23", "16.5", "Antonio", "32", "14", "Jessica", "21", "19"]

---

此時一切都很好但如果我希望數組中的javascript對象具有以下結構，我該怎么辦：

[{id:1, name: "Oscar", age: 23, grade: 16.5}, {id:2, name: "Antonio", age: 32, grade: 14}, {id:3, name: "Jessica", age: 21, grade: 19}]

只是為了更具體.​​.....

• id從tr獲得
• 從每行獲得name ， age和grade值

---

我做了這個jsfiddle來測試：

http://jsfiddle.net/oscarj24/ptVDm/

謝謝

Answer 1

var tbl = $('#students tr:has(td)').map(function(i, v) {
    var $td =  $('td', this);
        return {
                 id: ++i,
                 name: $td.eq(0).text(),
                 age: $td.eq(1).text(),
                 grade: $td.eq(2).text()               
               }
}).get();

→

Answer 2

我需要這個確切的東西，除了我需要更多的功能來覆蓋列名並忽略任何隱藏的行。 我寫了一個jQuery插件就是這樣，位於這里https://github.com/lightswitch05/table-to-json

為你的例子，你會做：（ http://jsfiddle.net/ptVDm/118/ ）

var table = $('#students').tableToJSON();

需要注意的一點是，id不是結果對象的一部分。 你可以從對象的數組位置獲取id。 或者，如果您真的需要它作為對象的一部分，您可以為ID創建一個隱藏列，然后將它們包括在內

Answer 3

以下應該有效：

var cols = [];
var result = [];
$('#students>thead>th').each(function(){
    cols.push($(this).text().toLowerCase());
});
$('#students>tbody>tr').each(function(id){
    var row = {'id': id+1};
    $(this).find('td').each(function(index){
        row[cols[index]] = $(this).text();
    });
    result.push(row);
});

console.log(result);

基本上，我從表頭找到對象屬性，接下來我為每一行創建一個對象，為從早期數組推導出的屬性名稱賦值。

一些明顯的缺陷：

• 如果表數據由於某種原因實際上不同（例如，化妝品的空行），則此系統將在結果數組中放置空對象。
• 如果在表中使用colspan屬性，則此系統不會自動在不同的對象屬性中復制相同的值，而是限制設置為剩余的<td> 。

看到約西亞的方法，它可能比我的快，因為我試圖通過找到屬性名稱變得更聰明。 如果您確定您的表結構不會改變，我會推薦他的技術。 否則，你需要我的代碼行。

哦，為了完整起見， 這里有一個JSFiddle與我的 。

Answer 4

看到更新的小提琴。 附加的數組map是不必要的，因為此時您正在為JSON查找文字對象。

var data = $('table#students tbody tr').map(function(index) {
    var cols = $(this).find('td');
    return {
        id: index + 1,
        name: cols[0].innerHTML,            // use innerHTML
        age: (cols[1].innerHTML + '') * 1,  // parse int
        grade: (cols[2].innerHTML + '') * 1 // parse int
    };
}).get();

Answer 5

嘗試以下n列方法

演示： http ： //jsfiddle.net/ptVDm/7/

var tblhdr = $('table#students th').map(function () {
    return $(this).text();
}).get();

console.log(tblhdr);

var tbl = $('table#students tbody tr').map(function(idx, el) {
    var td = $(el).find('td');
    var obj = {id: idx+1};

    //Can work on number of columns
    for (var i = 0; i < tblhdr.length; i++) {
        obj[tblhdr[i]] = td.eq(i).text();
    }

    return obj;
}).get();

console.log(tbl);

Answer 6

Dunno如果jQuery在這種情況下幫助很多，這里是一個簡單的JS解決方案，它完全獨立於表結構。 它只要求第一行是標題（可以是不同的表節元素），行1+是數據。

這個表可以有你想要的任意數量的列或行，如果有rowpan或colspans，它會混淆結果（但jQuery也無法幫助你）。

它可以很容易地適用於專門使用標題部分的屬性名稱和忽略頁腳部分：

function tableToObj(table) {
  var rows = table.rows;
  var propCells = rows[0].cells;
  var propNames = [];
  var results = [];
  var obj, row, cells;

  // Use the first row for the property names
  // Could use a header section but result is the same if
  // there is only one header row
  for (var i=0, iLen=propCells.length; i<iLen; i++) {
    propNames.push(propCells[i].textContent || propCells[i].innerText);
  }

  // Use the rows for data
  // Could use tbody rows here to exclude header & footer
  // but starting from 1 gives required result
  for (var j=1, jLen=rows.length; j<jLen; j++) {
    cells = rows[j].cells;
    obj = {};

    for (var k=0; k<iLen; k++) {
      obj[propNames[k]] = cells[k].textContent || cells[k].innerText;
    }
    results.push(obj)
  }
  return results;
}