javascript - 将 javascript 对象合并到 HTML 表中

Question

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

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

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

是否可以将这两个对象合并在一起生成一个 HTML 表格？如您所见，在预合并表中，x 值在两者之间共享，这意味着它在两个对象之间也是通用的。我认为可能有一种方法可以比较这些值，然后填充表格，但我不确定如何做。

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

x 值:对象之间共享的公共(public)日期列:来自每个预合并表的数据及其标题

这是我的代码(你也可以看到它 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

据我了解您的问题，您想通过列 x 值中的键值合并表。

下面是我的做法:

1. 将每个表中的数据收集到一个字典中，以列 x 值作为键
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 以使用性能更好的语法。