Dynamically restructure HTML table

Question

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.

would it be possible to give an example of the resulting table? — Jonas Köritz
– Jonas Köritz, Commented Dec 10, 2015 at 10:42
Why don't you just compare the data as string in the first common TD and than you fill the rest? Using each to loop the first common TD and :contains to find the td with the same data in the other table, than with closest('tr') you should be able to do the trick. — Vixed
– Vixed, Commented Dec 10, 2015 at 10:47
@Vixed would it be possible for you to write a small example? Thanks for your answer. — Mike Resoli
– Mike Resoli, Commented Dec 10, 2015 at 10:51
Sorry, not right now @MikeResoli, but can you please tell me if are using a query to for generating tables? if yes, I think is better to use union in mysql or sql select instead all this javascript. — Vixed
– Vixed, Commented Dec 10, 2015 at 10:59
@MikeResoli I made a fidde to let you understand what is missing jsfiddle.net/6q9dqozp I'll try to help you this evening. Sorry again. — Vixed
– Vixed, Commented Dec 10, 2015 at 11:48

Vixed · Accepted Answer · 2015-12-10 14:34:58Z

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.

Vixed · Accepted Answer · 2015-12-10 12:03:27Z

0

Hope this fiddle will help you to understand what are you missing ;)

/* please check this loop. Here you have to put your cleanYCol as well */
  for (i in cleanXCol) {
    $(resultsTableBody).append("<tr />")
    $('tr:last',resultsTableBody).append("<td>" + cleanXCol[i] + "</td>");
    // $('tr:last',resultsTableBody).append("<td>" + cleanYCol[i] + "</td>");
  }

http://jsfiddle.net/6q9dqozp

answered Dec 10, 2015 at 12:03

Vixed

3,5096 gold badges40 silver badges69 bronze badges

1 Comment

Mike Resoli Over a year ago

Thanks for that, I am now printing the data from the first table in the correct column successfully. However, as number of pre-merge table rows for each table is 7, the length of the cleanYCol array will be 14. As I have gathered all the dates from the tables and removed the duplicates (resulting in cleanXCol), it means there are only 7. How would I write a statement to print the other half of cleanYCol?

Collectives™ on Stack Overflow

Dynamically restructure HTML table

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related