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，否则你正在阅读登机区。

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

从表中使用JQuery构造JSON

2 个答案: