Setting Variable Names Using For Loop

Creating New Variables "on the fly"

[Quasaur1]

here's a hypothetical piece of code:

********************************
for(j=1;j<12;j++){
var tr1td+j = document.createElement('td');
tr1td+j.setAttribute('id','tr1td'+j);
tr1td+j.setAttribute('bgcolor','#424d7b');
tr1td+j.setAttribute('border','0');
tr1td+j.setAttribute('cellpadding','0');
tr1td+j.setAttribute('cellspacing','0');
tr1td+j.setAttribute('width','573');
document.getElementsById('OTtr1')[0].appendChild(trltd+j);
};
********************************
the name of the variable being created is determined by the iteration of the for loop...

...how would i implement this in "real life"?

[edited by: Quasaur1 at 12:48 am (utc) on Nov. 11, 2004]

[adni18]

I'm not sure of your meaning. This could be used to make many copies of the same code.

[adni18]

This particular code appends a <TD> to a table[I assume] 11 times, with specific attributes attached.

[Quasaur1]

Your last hypothesis is correct.

[Quasaur1]

perhaps i should be using arrays:

**********************
//now create td's for first row
var tr1td = new Array(12);
for(j=0;j<12;j++){
tr1td[j] = document.createElement('td');
tr1td[j].setAttribute('id','tr1td'+j);
tr1td[j].setAttribute('bgcolor','#424d7b');
tr1td[j].setAttribute('border','0');
tr1td[j].setAttribute('cellpadding','0');
tr1td[j].setAttribute('cellspacing','0');
tr1td[j].setAttribute('width','573');
document.getElementsById('OTtr1')[0].appendChild(trltd[j]);
};
**********************

my only concern is trying to set the "id" atribute based on the index of the array:

tr1td[j].setAttribute('id','tr1td'+j);

what do you think?

[edited by: Quasaur1 at 1:11 am (utc) on Nov. 11, 2004]

[adni18]

Either way, it's up to you. You're the webmaster. Nothing can change that (unless God sends a huge surge of electricity through the Internet). ;-)

[Bernard Marx]

Yes, an array is the thing to use - though only if you want to refer to the lement again outside that particular function.

A couple of things though..

1.

document.getElementsById('OTtr1')[0].appendChild(trltd[j]);

Ah no. You want:

document.getElementById('OTtr1').appendChild(trltd[j]);

2. In terms of efficiency, it would be better to put the element into a local variable while adding properties, then push it into the array at the end. Do the same with the row at the head of the loop, so the 'heavy' getElementById is only used once.
There's no need to pre-set the array length. Let the array sort that out, it will make you script more flexible.

[pre]
********************** 
//now create td's for first row 
var row = document.getElementById('OTtr1');
var tr1td = new Array();
var cell; 
for(j=0;j<12;j++){ 
    cell = document.createElement('td'); 
    cell.setAttribute('id','tr1td'+j); 
    cell.setAttribute('bgcolor','#424d7b'); 
    cell.setAttribute('border','0'); 
    cell.setAttribute('cellpadding','0'); 
    cell.setAttribute('cellspacing','0'); 
    cell.setAttribute('width','573');
    tr1td[j] = cell; 
    row.appendChild(cell); 
}
********************** 
[/pre]

my only concern is trying to set the "id" atribute based on the index of the array:
tr1td[j].setAttribute('id','tr1td'+j);

Should be OK. However, you can already reference your cells via the global array that's been created. The cells can also be referenced reasonably easily with DOM methods through their position in the table. I reckon ids are unnecessary.

---------------------------------------------

PS. The array isn't global (just noticed the 'var'). It may be completely unnecessary too.

[Quasaur1]

Thanks, Bernard!

I need some time to digest your advice...the script i'm using this in has grown rather sizeable.

[Quasaur1]

The use of arrays are obviously more appropriate, so i'm CLOSING THIS DISCUSSION.