Get values of tds in a table

Question

Ok how you can see in my fiddle im trying to manipulate the left table, so that at the end it looks like the table on the right: http://jsfiddle.net/SULK3/2/

To do this i first try to get the values of the td s loop through them and look for the dates and change the rowspans upon the data i get: So i started with a normal table and this code:

var values = [];
   var table = $(this).closest("table");
   table.find("tr").each(function() {
      values.push($(this).find("td:first").html());
   });

$('#values').text(values); 

But somehow it wont work, the values of the rows wont be outgiven in the div with the id values! Why? (If you have ideas how to solve my 'big'-problem please post it also here!) Thanks

Answer 1

In this line

var table = $(this).closest("table");

what is this ? In the fiddle, it's the window, which has no closest table, as closest() means closest parent element?

As there is only one table , are two tables, just changing it to

var table = $('table:first')

seems to work :

FIDDLE

Answer 2

You are probably going to try to accomplish this with the array you are building. And just wanted to know why the values were not showing up in #values .

I wasn't sure so I started working on a solution.. I came back to see you had already marked an accepted answer which is great that must have been what you were looking for.

I don't expect or want you to mark this as the accepted answer but I had fun trying to find a solution, so here you go:

var dateCount = 0;
var addtoTr = 0;
var table = $("table:first");
var date = table.find('tr:first').find('td:first').html();

   table.find("tr").each(function(index) {
       if(date === $(this).find("td:first").html() || date === ''){
        dateCount++;
       }
       else{
          table.find('tr').eq(addtoTr).prepend('<td rowspan='+dateCount+'>'+date+'</td>');
          dateCount = 1;
          date = $(this).find("td:first").html();
          addtoTr = index;
       } 
       $(this).find("td:first").remove();
   });
   table.find('tr').eq(addtoTr).prepend('<td rowspan='+dateCount+'>'+date+'</td>');

http://jsfiddle.net/SULK3/6/

This is only one way to do it.. I'm sure there are many other, and better ways.