Change the color of several elements in the page

@vwphillipsJan 16.2005 — #yes, but i doubt its necessary

give your table an id say 'MyTable';

then in the <body> tag onload="FindTableTRs('MyTable');"

then (or variations of)

[code=php]
 <script>
 
 function FindTableTRs(Obj){
 TRs=getElementById(Obj).getElementsByTagName('TR');
 for (i=0;i<TRs.length;i++){
 TRs[i].style.backgroundColor='red';
 }
 TRs[0].style.backgroundColor='blue';
 }
 
 
 </script>
 [/code]

now the first row will be blue and all other rows red and you can use

TRs[n] instead of an id

@hastalavistaJan 16.2005 — #You may not use the same id multiple times in one document.

Only the first occurance will get the id.

The have multiple elements to get the same style use classes.

On 1)

Why do you try to style the rows? Isn't it more straightforward to style the table? You could set the background of anything in the table to transparent to avoid 'painting-over'.

As styling tables is done in different ways by various (older) brwosers, you may want a saver way.

You could set the background of the top layer in the table: the cells. Put the cells in the same class, nand let that have a background color.

Also, when you need to change the background later, you could let them all have a unique id. If that is your plan, my experience is that it is best to set an initial value in the tag itself.

example:

function specialevent() {

document.getElementById('cell6').style.background = 'navy';

document.getElementById('cell7').style.background = 'navy';

}

.......

<td id="cell7" style="background: yellow;" onmouseover="this.style.background='gray';" onclick="specialevent();">party item</td>

2)

You could make an array with document.getElementsByTagName('td'); and the test the id or className of the arraymembers.

Change the color of several elements in the page

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Change the color of several elements in the page

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴