转换HTML表格JS对象

Z时代
2024-01-10
分类：问答

我有一个表，看起来像这样我使用JS转换为JS对象，其中：转换HTML表格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>

回答：

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

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>

回答：

你可以保持一个对象，并用它和一些条件下工作，只有把它推到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);