Fatal编程技术网
  • javascript/
  • Javascript 将HTML表转换为JS对象

Javascript 将HTML表转换为JS对象

javascript arrays

Javascript 将HTML表转换为JS对象,javascript,arrays,html-table,Javascript,Arrays,Html Table,我有一个类似这样的表，我正在使用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 D

我有一个类似这样的表，我正在使用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);
}
我面临的问题是，console消息输出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>


我的名字
2017-12-18 15:07:33
示例文本
0700100100
无名氏
0700100200
无名氏2
0700100300
无名氏3
0700100400
无名氏4
0700100500
无名氏5
您可以保留一个对象并使用它和某些条件，并且只在必要时将其推送到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);
如果第2行的列-1也打印“我的名字”，则可以使用
colmn[0].innerHTML！=object.message_by
检查是否需要推送对象并开始构建另一个对象。

您可以保留一个对象并使用它和某些条件，并且仅在必要时将其推送到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);
如果第2行的列-1也打印“我的名字”，则可以使用
colmn[0].innerHTML！=object.message_by
检查是否需要推送对象并开始构建另一个对象。

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

var table=document.getElementById（'table'）；
var colmn=table.rows[0]。单元格；
var消息={
“message_by”：colmn[0]。innerHTML，
“消息日期”：新日期（），
“邮件收件人”：[]，
“消息文本”：colmn[2]。innerHTML
};
for（变量i=0，行；行=表。行[i]；i++）{
colmn=row.cells；
message.message\u recipients.push({
“电话号码”：colmn[4]。innerHTML，
“收件人名称”：colmn[3]。innerHTML
});
}
控制台日志（消息）

td{
文本对齐：左对齐；
宽度：200px
}



我的名字
2017-12-18 15:07:33
示例文本
0700100100
无名氏
0700100200
无名氏2
0700100300
无名氏3
0700100400
无名氏4
0700100500
无名氏5

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



var table=document.getElementById（'table'）；
var colmn=table.rows[0]。单元格；
var消息={
“message_by”：colmn[0]。innerHTML，
“消息日期”：新日期（），
“邮件收件人”：[]，
“消息文本”：colmn[2]。innerHTML
};
for（变量i=0，行；行=表。行[i]；i++）{
colmn=row.cells；
message.message\u recipients.push({
“电话号码”：colmn[4]。innerHTML，
“收件人名称”：colmn[3]。innerHTML
});
}
控制台日志（消息）

td{
文本对齐：左对齐；
宽度：200px
}



我的名字
2017-12-18 15:07:33
示例文本
0700100100
无名氏
0700100200
无名氏2
0700100300
无名氏3
0700100400
无名氏4
0700100500
无名氏5

将for循环限制为第4列和第5列？老实说，我不知道问题出在哪里。答案是“重写你的代码来做你想做的事情”我尝试过的不同方法在整个表中循环，包括空字段，这就是我在这里的原因。你能给你的问题添加示例表HTML吗？我刚刚编辑了这个问题。我添加了一个示例HTML表。是否将for循环限制为第4列和第5列？老实说，我不知道问题出在哪里。答案是“重写你的代码来做你想做的事情”我尝试过的不同方法在整个表中循环，包括空字段，这就是我在这里的原因。你能给你的问题添加示例表HTML吗？我刚刚编辑了这个问题。我添加了一个示例HTML表。修复了，对不起。忘了上次推的事了（修正了，我很抱歉。忘记了最后一次推了。）（非常感谢。你刚刚为我的下午节省了一吨。你刚刚为我的下午节省了一吨