Question

I’ve got a lovely table function from josh.trow @ link that builds a 4×4 table which can be filled with color. The only problem is is that it rebuilds itself every time I call the function (hence the first time I call the file I see a 4×4 table, the second time I see a 8×4 table, and so on.) It doesn’t multiply the rows because they are already limited to 4.

I can’t see what check I need to put in that limits the table’s columns to only being built once. (4)

Here’s the JS code:

function repeatedFunction(L, G, P, D) {
jQuery.fn.reverse = [].reverse;

var completeData = [L, G, P, D];
var max = 4;
$.each(completeData, function(intIndex, objValue) {
    if (objValue > max) max = objValue;
});
for (var i = 0; i < max; i++) 
{
    $('#statSheetTable').append('<tr id="resultRow' + i + '"></tr>');
    $.each(completeData, function(intIndex, objValue) {

    $('#resultRow' + i).append('<td name="column' + intIndex + '" ></td>');
    });
}

$.each(completeData, function(intIndex, objValue) {
    $('td[name=column' + intIndex + ']').reverse().each(function(idx, val) {
        if (idx < objValue) $(this).addClass('complete' + intIndex);
    });
});
}

---

I tried using a global variable, which stopped the table from being duplicated, but then my color filling code was not functioning (as it can’t be refreshed with the new instructions to fill with color).

Essentially what I added to the above function was:

var firstTime = true;
.....
function repeatedFunction(L, G, P, D, 4) {
if(firstTime == true)
{
    .....
    // code from above block
    .....
    firstTime = false;
}

---

Do your experienced JS eyes see where I can limit the table from building more columns?

Answer 1

Here you go chief, updated as you asked.

EDIT: Whoops, now it works 🙂

http://jsfiddle.net/X83ya/2/