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

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行中，打印“我的名字”也一样，你可以使用colmn[0].innerHTML != object.message_by来检查，如果你需要推对象，并开始建立另一个。