Question

I have this table, I dynamically load it, and after that I add the according column headers for Well[#]. When I load the data I don’t know from how many well’s I’m getting data from. So I can’t tell how big the table will be.

The question here is this, I have a table looking like so:

As you can see, I have void space filling the rows that are not 4 Wells long (pointed by red) and I’d like to fill those spaces with cells like the ones pointed by blue. I was analyzing the table using firebug, looking for some string that indicates that there’s no cell at all, but there’s no string at all to replace either.

I have the object myTable(), is there any method that allow me to do what I described above?

Answer 1

//cache the table element and find the number of columns
var $table       = $('table'),
    column_count = $table.find('tr').eq(1).children('td').length;

//iterate through each row
$table.find('tr').each(function () {

    //cache this row and it's children columns
    var $this = $(this),
        $tds  = $this.children('td');

    //check if the number of columns in this row is less than the number of columns in the header
    if ($tds.length < column_count) {

        //add the difference of the needed columns and the current columns to the row
        for (var i = 0, len = (column_count - $tds.length); i < len; i++) {
            $this.append('<td>&nbps;</td>');
        }
    }
});

Here is a demo: http://jsfiddle.net/AEjTZ/

Note that this looks at the second row in the table to see how many columns there are (I’m trying to target the green row in your screen-shot). You may have to change that to target the proper row (the green row in your screen-shot).