從表中使用JQuery構造JSON

Question

我正在嘗試使用可編輯的表在JQuery中構造以下JSON，但我不知道從哪里開始，因為我的標題，登機區（列）數和路線序列（行）數一直在變化，因此我必須手動提取數據並每行構造JSON。 預先感謝您的任何評論和回復。

{  "name": txtRouteName.val(),
  "serial": [
    { "rsn": "X100", "boardingzone": [
      { "name": "Foo", "time": "8:00" },
      { "name": "Bar", "time": "8:15"}
    ] },
    { "rsn": "X101", "boardingzone": [
      { "name": "Foo", "time": "9:00" },
      { "name": "Bar", "time": "9:15"}
    ] }
  ] 
};    

該表顯示如下：

<table id="table1">
   <tr>
   <td>RSN</td>
       <td>Foo</td>
       <td>Bar</td>
   </tr>                        
  <tr>
      <td>X100</td>
      <td>8:00</td>  
      <td>8:15</td>
  </tr>
  <tr>
      <td>X101</td>
      <td>9:00</td>  
      <td>9:15</td>
  </tr>
</table>

Answer 1

迭代行和單元格：

$("#table1 tr").each(function(){
         //Rows action
         $(this).children("td").each(function (){
         //Cells action
         });
});

如果您在第一行，則有字段名稱。 如果您在該行的第一個單元格中，則正在讀取rsv，否則，您正在讀取boardingzone。

Answer 2

首先，建議您將th用作表標題：

<table id="table1">

   <tr>
       <th>RSN</th>
       <th>Foo</th>
       <th>Bar</th>
   </tr>

然后，您可以：

function parseTable(table) {
    // Helper function to extract the text content of a cell
    function getText(i, cell) { return $(cell).text().trim() };

    // Get the text of the headings as an array
    var headings = $(table).find('tr:eq(0)').find('th').map(getText);

    // Get the text of the values as an array of arrays (values in rows)
    var values = $(table).find('tr:gt(0)').map(function(i, row) {
        return $(row).find('td').map(getText);
    });

    // Map the data according to these rules:
    // One object per row, with `boardingzone` keeping an array of the values
    var result = $.map(values, function(row) {
        var obj = {};
        obj[headings[0]] = row[0];
        obj.boardingzone = $.map(row.slice(1), function(value, i) {
            return {
                name: headings[i + 1],
                time: value
            }
        });
        return obj;
    });

    return result;
}
console.log(JSON.stringify(parseTable("#table1")));