How to stop the table from being built again

Question

I've got a lovely table function from josh.trow @ link that builds a 4x4 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 4x4 table, the second time I see a 8x4 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/

Answer 2

First, always use identical comparison operators when comparing boolean values:

if(firstTime === true)

That being said, you don't need it if you just want to rebuild your table. $('#statSheetTable').append(... will just "add to" whatever was in there. Make sure you clear it out in the beginning like such:

...
var max = 0;
$('#statSheetTable').html('');
...