Array of Auto-Generating HTML Table Problem

I'm almost finished with this app for XUL / HTML Table Generation, and i have a really strange problem...

The HTML strings in the Arrays can be changed, and the HTML file saved, and the HTML page reloaded, and the changes will render.
However, i have one array, no matter what i change the HTML strings to, it refuses to render the changes made to the HTML strings.
It's quite confusing...

the array in question is


// Humidor InnerHTML
HumidorInnerHTML[0] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[1] = "<input type='textbox' id='Others_Caption" + HumidorIndex + "'>";
HumidorInnerHTML[2] = "<input type='textbox' value='85' id='Others_Height" + HumidorIndex +"'>";
HumidorInnerHTML[3] = "<input type='textbox' value='85' id='Others_Width" + HumidorIndex +"'>";
HumidorInnerHTML[4] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[5] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[6] = "<img src='delete.png' onClick=DeleteRow('" + HumidorIndex + "','Humidor_Table');>";
HumidorInnerHTML[7] = "<img src='add.png' onClick=AddRow('" + HumidorIndex + "','Humidor_Table');>";


and the function that generates the HTML Table on the fly (and adds the cell data to them) is here:


function AddRow(index, DIV)
{
MyTable = document.getElementById(DIV);

var newCell;
var newRow = MyTable.insertRow(index);

var Length;

switch (DIV)
{
case "Intro_Table" : Length = IntroInnerHTML.length;
break;
case "Image_Table" : Length = ImageInnerHTML.length;
break;
case "Watch_Table" : Length = WatchInnerHTML.length;
break;
case "Others_Table" : Length = OthersInnerHTML.length;
break;
case "Humidor_Table" : Length = HumidorInnerHTML.length;
break;
}

for (var i = 0; i < Length; i++)
{
newCell = newRow.insertCell(i);

switch (DIV)
{
case "Intro_Table": newCell.innerHTML = IntroInnerHTML[i];
break;
case "Image_Table": newCell.innerHTML = ImageInnerHTML[i];
break;
case "Watch_Table": newCell.innerHTML = WatchInnerHTML[i];
break;
case "Others_Table": newCell.innerHTML = OthersInnerHTML[i];
break;
case "Humidor_Table": newCell.innerHTML = WatchInnerHTML[i];
break;
}

}

// Update the Index Counters
switch (DIV)
{
case "Intro_Table": IntroIndex++;
break;
case "Image_Table": ImageIndex++;
break;
case "Watch_Table": WatchIndex++;
break;
case "Others_Table": OthersIndex++;
break;
case "Humidor_Table": HumidorIndex++;
break;
}
}


when the page is loaded, the Init() function is started, that code is here:


function Init()
{
AddRow(1, "Intro_Table");
AddRow(1, "Image_Table");
AddRow(1, "Watch_Table");
AddRow(1, "Humidor_Table");
AddRow(1, "Others_Table");
}


Did i miss something? there must be something i've over looking. I have even tried isolating some other external JS, and CSS includes that i have, and isolating them has no change in the result.

the html file is live here:

http://kevinjohnson.clanteam.com/XML-App/ManageSite.html

thanks :)

Code makes no sense.

You create all those HTML strings WHEN THE PAGE IS LOADED:

var IntroIndex = -1;
...
IntroInnerHTML[1] = "<input type='textbox' id='Intro_Caption" + IntroIndex + "'>";
IntroInnerHTML[2] = "<input type='textbox' value='85' id='Intro_Height" + IntroIndex +"'>";
...

So *ALL* of those HTML strings will have IntroIndex set to -1.

And so you might as well have simply done:
...
IntroInnerHTML[1] = "<input type='textbox' id='Intro_Caption-1'>";
IntroInnerHTML[2] = "<input type='textbox' value='85' id='Intro_Height-1'>";
...

The fact that LATER in the code you do

switch (DIV)
{
case "Intro_Table": IntroIndex++;
break;
...

Will have NO IMPACT WHATSOEVER on the contents of all those HTML strings!

So, just as an example, after adding another row by clicking on the + for Image Options, both the first and second row have

<input id="Image_Caption-1" type="textbox">

I *assume* that what you were after was to produce multiple fields such as
<input id="Image_Caption0" type="textbox">
<input id="Image_Caption1" type="textbox">
<input id="Image_Caption2" type="textbox">
...

But that won't happen with this code.

Incidentally, there is no such thing in HTML as type="textbox". It should be just type="text". Not that it matters too much; if you omit or give an invalid type for an <input>, it defaults to "text".

Incidentally, you can easily see this happening--all those identical "-1" fields being created--if you use Firebug with FireFox.

Incidentally, you can easily see this happening--all those identical "-1" fields being created--if you use Firebug with FireFox.

Actually, what the problem is if you goto the Tab or section where it says "Humidor" the last two cells in the table should be pictures that have onClick events in them, they trigger functions that add or delete a table row from the table. However the problem i'm having, is that the correct HTML elements are not being loaded there. The HTML elements come directly from the Array that i have setup at the beginning of the script called HumidorInnerHTML[]

I can change any of the HTML tags in the HumidorInnerHTML variables, and then save, and refresh the page, ...and it will not actually change anything...
there is something blocking it, but i don't know what....

that's the problem...

Fine. Have it your way. Just be aware that your code that does

switch (DIV)
{
case "Intro_Table": IntroIndex++;
break;
...

is *NOT* impacting what you are dumping into new rows.

Not to mention that you claim to be standards compliant, yet you are still adding rows via innerHTML instead of the more modern and standard use of document.createElement( ).

Anyway, I won't comment on the code again. Maybe sometody else can find a way for you to make it work when it doesn't do what it was apparently intended to do.

Fine. Have it your way. Just be aware that your code that does

switch (DIV)
{
case "Intro_Table": IntroIndex++;
break;
...

is *NOT* impacting what you are dumping into new rows.

Not to mention that you claim to be standards compliant, yet you are still adding rows via innerHTML instead of the more modern and standard use of document.createElement( ).

Anyway, I won't comment on the code again. Maybe sometody else can find a way for you to make it work when it doesn't do what it was apparently intended to do.

if it's not standard-compliant code, then why does it work with FF? just something to think about i guess. But then again, what is standards anyway? they keep changing. Some people have told me that using onClick="ThisFunction" in code is non-standard also, but i see it used in so many websites still. Anyways, enough of that :)

i found the solution :D


case "Humidor_Table" : Length = WatchInnerHTML.length;
break;


should have been


case "Humidor_Table" : Length = HumidorInnerHTML.length;
break;