javascript - 将 HTML 表格转换为 JS 对象

Question

我有一个看起来像这样的表，我正在使用 JS 将其转换为 JS 对象:

|column-1|column-2|column-3|column-4|column-5|
|--------|--------|--------|--------|--------|
|My Name |  Date  |Message |John Doe|Phone #s|
                           |Jhn Doe2|Phone #s|
                           |Jhn Doe3|Phone #s|
                           |Jhn Doe4|Phone #s|
                           |Jhn Doe5|Phone #s|

这是我的 JS 代码:

var table = document.getElementById('table');
  var jsonArr = [];
  for(var i =0,row;row = table.rows[i];i++){
       var colmn = row.cells;

         var recipeints = [{
          "phone_number": colmn[4].innerHTML,
          "recipient_name": colmn[3].innerHTML
         }];
         var message = {
            "message_by": colmn[0].innerHTML,
            "message_date": new Date(),
            "message_recipients": recipeints,
            "message_text": colmn[2].innerHTML
        };
        console.log(message);
}

我面临的问题是控制台消息使用 message 数据输出 5 个不同的对象数组，但我只想要一个对象输出，其中第 4 列和第 5 列有嵌套对象。

这是输出的一个实例:

{message_by: "My name", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: "Message"}
{message_by: "", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: ""}
{message_by: "", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: ""}
{message_by: "", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: ""}
{message_by: "", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: ""}

这就是我想要的输出:

{message_by: "My Name", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(5), message_text: "test"}
message_by:"My Name"
message_date:Mon Dec 18 2017 14:32:29 {}
message_recipients:Array(5)
    0:{phone_number: "0700100100", recipient_name: "John Doe"}
    1:{phone_number: "0700100200", recipient_name: "John Doe 2"}
    2:{phone_number: "0700100300", recipient_name: "John Doe 3"}
    3:{phone_number: "0700100400", recipient_name: "John Doe 4"}
    4:{phone_number: "0700100500", recipient_name: "John Doe 5"}
message_text:"sample"

也就是说，我只想输出一个对象并合并第 4 列和第 5 列以避免多个对象中出现空字段。我怎样才能实现这个目标？

更多信息

动态生成表的代码如图:

<table id='table'>
   <tr>
      <td align='left' width='200'>My Name</td>
      <td align='left' width='200'>2017-12-18 15:07:33</td>
      <td align='left' width='200'>Sample Text</td>
      <td align='left' width='200'>0700100100</td>
      <td align='left' width='200'>John Doe</td>
   </tr>
   <tr>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'>0700100200</td>
      <td align='left' width='200'>John Doe 2</td>
   </tr>
   <tr>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'>0700100300</td>
      <td align='left' width='200'>John Doe 3</td>
   </tr>
   <tr>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'>0700100400</td>
      <td align='left' width='200'>John Doe 4</td>
   </tr>
   <tr>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'>0700100500</td>
      <td align='left' width='200'>John Doe 5</td>
   </tr>
</table>

Answer 1

我主要使用了您自己的代码，但将第一行拉出了循环。

var table = document.getElementById('table');

var colmn = table.rows[0].cells;

var message = {
  "message_by": colmn[0].innerHTML,
  "message_date": new Date(),
  "message_recipients": [],
  "message_text": colmn[2].innerHTML
};

for (var i = 0, row; row = table.rows[i]; i++) {
  colmn = row.cells;

  message.message_recipients.push({
    "phone_number": colmn[4].innerHTML,
    "recipient_name": colmn[3].innerHTML
  });
}
console.log(message);

td {
  text-align: left;
  width: 200px
}

<table id='table'>
  <tr>
    <td>My Name</td>
    <td>2017-12-18 15:07:33</td>
    <td>Sample Text</td>
    <td>0700100100</td>
    <td>John Doe</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>0700100200</td>
    <td>John Doe 2</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>0700100300</td>
    <td>John Doe 3</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>0700100400</td>
    <td>John Doe 4</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>0700100500</td>
    <td>John Doe 5</td>
  </tr>
</table>