將javascript對象合並到HTML表中

Question

我有兩個javascript對象，其內容來自這兩個HTML表。

每個預合並表現在都有其自己的對象。 該對象的結構如下：

對象中的第一個數組元素包含合並前表中的列標題，其后的數組元素中包含每個表中的<tr>數據。

是否可以將這兩個對象合並在一起以生成一個HTML表？ 如您所見，在合並前表中，x值在兩個對象之間共享，這意味着它在兩個對象之間也是相同的。 我認為可能有一種比較這些值，然后填充表的方法，但是我不確定如何。

我希望合並表如下所示：

x值：對象列之間共享的公用日期：每個合並表的數據及其標題

這是我的代碼（您也可以在此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對象作為字典，我們可以像字典一樣即時創建屬性。

有關完整腳本，請參見插件 。 我在不同的部分上寫了評論，以使功能清晰。 讓我知道是否有任何不清楚的地方。

作為代碼的注釋。 您可以在jQuery選擇器中使用多個參數來簡化選擇，因此（請參見下面的注釋）

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

可以變成這樣：

tables = $('.before table');

編輯

正如Mark Schultheiss在評論中指出的那樣，在大型DOM上，jQuery選擇器的后一種語法較短，但語法可能比第一種慢。 因此，對大型DOM使用擴展語法。 我已經更新了插件，以使用性能更好的語法。