javascript - 动态重组 HTML 表格

Question

我有两个 HTML 表格需要合并在一起，然后将结果输出为一个单独的表格。

函数 objectify() 找到每个预合并表并将它们的数据放入以下格式的对象中:

从这一点开始，事情就变得棘手了。我的 standardise() 函数循环遍历每个对象，将 header 和日期值放入数组中，然后调用 removeDuplicates() 删除重复项(不言自明)。

但是，当涉及到将每个对象合并在一起并将数据输出到表中时，我想不出该怎么做。到目前为止，我只能弄清楚如何输出表头，如下所示:

Here是我的代码笔的链接。任何帮助将不胜感激。

Answer 1

我删除了一些你的代码，现在似乎可以工作了。 http://jsfiddle.net/dt1dmmk2/

function removeDuplicates(array) {
  var cleanValues = [];
  $.each(array, function(i, el) {
    if ($.inArray(el, cleanValues) === -1) cleanValues.push(el);
  });
  return cleanValues;
}
var titles=[];
var totRow=0
  $('.before table').each(function() {
    var rowNumber=$('tr',this).length-1;
    if (totRow<rowNumber)
      totRow=rowNumber;

    var firstCol;
    var secondCol;
    $('tr',this).each(function(index) {
      if (index == 0) {
        firstCol=$('td:first',this).text();
        secondCol=$('td:last',this).text();
        titles.push(firstCol,secondCol)
      } else {
        $('td:first',this).attr('data-col',firstCol);
        $('td:last',this).attr('data-col',secondCol);
      }
    });
  })
  titles=removeDuplicates(titles);
  $('.after table').append('<tr>');
  for (i in titles) {
    $('.after table tr:last').append('<th>' + titles[i] + '</th>');
  }
    for (var b=0;b<totRow;b++) {
      $('.after table').append('<tr />')
      for (i in titles) {
            var textToFill=$('.before td[data-col="'+titles[i]+'"]:first').text();
            $('.after table tr:last').append('<td>'+textToFill+ '</td>');
            $('.before td[data-col="'+titles[i]+'"]:first').removeAttr('data-col')
      }
    }
    $('td[data-col]').removeAttr('data-col'); // just to clean

当然，TR 已经在.before 表 中排序，这样您就不需要重新排列新的。