text: Q:
  
  Dynamically restructure HTML table
  
  I have two HTML tables that I need to merge together, and then output the result as a separate table. 
  
  The function objectify() finds each of the pre-merge tables and puts their data into objects in the following format: 
  It is from this point onwards things get tricky. My standardise() function loops through each object, placing the header and date values into arrays, and then calling removeDuplicates() to remove the duplicates (self-explanatory).
  However, when it comes to merging each of the objects together and outputting the data into a table, I cannot think of how to do it. So far, I can only figure how to output the table headers, like so:
  
  Here is a link to my codepen. Any help would be appreciated.
  
  A:
  
  I removed a bit of your code an now seems to work.
  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
  
  Of course the TR has be ordered in the .before table and in this way you'll not need to rearrange the new ones.
  
  