将javascript对象合并到HTML表

Question

我有两个javascript对象，其内容来自这两个HTML表。

每个预合并表现在都有自己的对象。该对象的结构如下：

对象中的第一个数组元素包含预合并表中的列标题，后面的数组元素包含每个表中的<tr>数据。

是否可以将这两个对象合并在一起以生成一个HTML表格？正如您可以在合并前表中看到的那样，x值在两者之间共享，这意味着它们在两个对象之间也很常见。我想可能有一种比较这些值的方法，然后填充表格，但我不确定如何。

我希望合并的表格如下所示：

x值：对象之间共享的常见日期 columns：来自每个预合并表及其标题的数据

这是我的代码（您也可以看到它on this CodePenHere）：

$(document).ready(function(){
  gatherData();
  results();
});

function gatherData(){
  data = [];

  tables = $('.before').find('table');

  $(tables).each(function(index){
    table = [];

    var headers = $(this).find('tr:first');
    var headerText = [];
    headerText.push($(headers).find('td:nth-child(1)').text());		
    headerText.push($(headers).find('td:nth-child(2)').text());
    table.push(headerText)
    $(this).find('tr').each(function(index){
      var rowContent = [];
      if (index != 0){
        $(this).find('td').each(function(index){
          rowContent.push($(this).text());
        })
      }
      table.push(rowContent)
    })

    data.push({table: table})
  });

  console.log(data)
}

function results(){
  var results = $('.after1').find('thead');

  $(results).append("<th>" + data[0].table[0][0] + "</th>");

  for (i in data){
    $(results).append("<th>" + data[i].table[0][1] + "</th>");
    var b = data[i].table.length;
    for (a = 2; a < b; a++){
      console.log(data[i].table[a][0] + " || " + data[i].table[a][1])
    }
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <h1 class="page-header">Formatter.js</h1>
</div>
<div class="container before">
  <h3>Before</h3>
  <table border=1 cellspacing=0 cellpadding=0 alignment="" class="a" id="3">
    <tbody>
      <tr>
        <td>x-value</td>
        <td>Operational Planned</td>
      </tr>
      <tr>
        <td>09/11/2015</td>
        <td>0</td>
      </tr>
      <tr>
        <td>10/11/2015</td>
        <td>0</td>
      </tr>
      <tr>
        <td>11/11/2015</td>
        <td>66358</td>
      </tr>
      <tr>
        <td>12/11/2015</td>
        <td>65990</td>
      </tr>
      <tr>
        <td>13/11/2015</td>
        <td>55993</td>
      </tr>
      <tr>
        <td>14/11/2015</td>
        <td>0</td>
      </tr>
      <tr>
        <td>15/11/2015</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
  <table border=1 cellspacing=0 cellpadding=0 alignment="" class="a" id="3">
    <tbody>
      <tr>
        <td>x-value</td>
        <td>Something Else</td>
      </tr>
      <tr>
        <td>09/11/2015</td>
        <td>0</td>
      </tr>
      <tr>
        <td>10/11/2015</td>
        <td>0</td>
      </tr>
      <tr>
        <td>11/11/2015</td>
        <td>2552</td>
      </tr>
      <tr>
        <td>12/11/2015</td>
        <td>86234</td>
      </tr>
      <tr>
        <td>13/11/2015</td>
        <td>33623</td>
      </tr>
      <tr>
        <td>14/11/2015</td>
        <td>0</td>
      </tr>
      <tr>
        <td>15/11/2015</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>

  <hr>
</div>
<div class="container after">
  <h3>After</h3>
  <table class="table after1">
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

Answer 1

据我所知，您希望通过coloumn x-value中的键值合并表。

我将如何做到这一点：

1. 将每个表中的数据收集到一个字典中，其中coloumn x-value为key
2. 将每个键的值保存为数组。

主要部分是收集字典中的数据。这是部分：

var table = {
  header: [],
  data: {}
};

$(this).find('tr').each(function(index) {
  // ignore first row
  if (index === 0) return true;

  // read all data for row
  var rowData = [];
  $(this).find('td').each(function() {
    var value = $(this).text();
    rowData.push(value);
  });

  // key value for dictionery
  var key = rowData[0];

  // add value to array in dictionary if existing or create array
  if(table.data[key]) {
    table.data[key].push(rowData[1]);
  } else {
    table.data[key] = [rowData[1]];
  }
});

通过使用简单的javascript对象作为字典，我们可以动态创建属性，就像字典一样。

请参阅plunker for the full script。我已经在不同的部分写了评论，以使功能清晰。如果有什么不清楚，请告诉我。

作为您的代码的注释。您可以在jQuery选择器中使用多个参数来使您的选择更简单，因此（请参阅下面的注释）

tables = $('.before').find('table');

可以成为：

tables = $('.before table');

修改

正如Mark Schultheiss在评论中所指出的，jQuery选择器的后期但更短的语法可能比大型DOM上的第一个慢。因此，在大型DOM上使用扩展语法。我已经更新了plunker以使用性能更好的语法。