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

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

这是输出的一个实例：

{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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以保留一个对象并使用它和某些条件，并在必要时将其推送到jsonArr。

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

  if(colmn[0].innerHTML != ''){
    if(object !== undefined){
      jsonArr.push(object);
    }
    object = {
      message_by : colmn[0].innerHTML,
      message_date : new Date(),
      message_text : colmn[2].innerHTML,
      message_recipients : [],
    }
  }
        var recipient = {
    "phone_number": colmn[4].innerHTML,
    "recipient_name": colmn[3].innerHTML
   };
   object.message_recipients.push(recipient);
}
jsonArr.push(object);
console.log(jsonArr);

如果你的第1列，在第2行，打印＆＃34;我的名字＆＃34;您也可以使用colmn[0].innerHTML != object.message_by检查是否需要推送对象并开始构建另一个对象。

将HTML表转换为JS对象

2 个答案: