change bgcolor (have searched the forum w/o luck)

@onerrorgotoSep 03.2003

Hello
I have searched this forum for a post on how to change the backgroundcolor of the tr-tag in a table. but no luck.
I have found alot on changing the background but none that has helped me.

Im creating a system using ASP.NET and javascripts and my tables are created by webcontrol that i have created.

I have this function below that is called by onclick in the tr.
I have tried to make it dynamic so that all my tables can call it without me having to write special cases for each table.

(The problem is that it only changes the color of the first cell to blue and when i click on another cell it doesnt change the color of the first cell back to white, so now both rows have their first cell colored blue.) (I think it has something to do with my stylesheet)

I have now alterd the webcontrol to also add the class=… to the first <td> and now no cells are changin color!!

I thought that a style in a tr had higher priority than a css??

Oooops. It seems that I am setting the backcolor on each <td> with css and then I dont think it will help to change the backcolor on the <tr>.
Hmmmm. how do i change my function to override each <td>-style?? Do i have to change the backcolor of each <td>?? but I still want each <td> to use the settings in my css, except for the backcolor. and when i click on another row i want the previous to go back and use only the settings in my css.

any ideas.

[code] function changecolor(Row) { var introw; //show id for the row //alert(Row.id); //get the row-nr and add 1 for the header var rownr=parseFloat(Row.id.substring(Row.id.indexOf(“_”)+2,Row.length)) + 1; //alert(rownr); //get the id for the table, (each rows id = table_r + index) var index=Row.id.indexOf(“_”); var tbl=Row.id.substring(0,index); //how many rows has the table var introw = document.getElementById(tbl).rows.length; //alert(introw); //change color to white for(i=1;i<document.getElementById(tbl).rows.length – 1; i++) { //document.getElementById(tbl).rows[i].bgcolor = “#ffffff”; document.getElementById(tbl).rows(i).style.backgroundColor=”#ffffff”; //alert(document.getElementById(tbl).rows[i].bgcolor); } //change color to blue on clicked row //document.getElementById(tbl).rows[rownr].backgroundColor = “#99cccc”; document.getElementById(Row.id).style.backgroundColor=”#99cccc”; //alert(Row.id + ” ” + document.getElementById(tbl).rows[rownr].bgColor); }

<table ID=’tbllvwGrade’ width=’100%’ height=’100%’ cellspacing=’0′ cellpadding=’0′> <THEAD> <tr ID=”tblheader” style=”top:expression(document.getElementById(‘tbllvwGrade_Header’).scrollTop);position:relative;”> <td class=’header’ width=’5′> </td> <td class=’header’>Source</td> <td class=’header’>GradeNo</td> <td class=’header’>SteelName</td> <td class=’header’>Revision</td> <td class=’header’>C </td> <td class=’header’>N </td> <td class=’header’>Cr</td> <td class=’header’>Ni</td> <td class=’header’>Mo</td> <td class=’header’>Others</td> </tr> </THEAD>

<TBODY> <tr ID=tbllvwGrade_r0 onclick=’javascript:changecolor(this)’>

<td width=’5′></td> <td ID=tbllvwGrade_r5_c0 class=’listbody’></td> <td ID=tbllvwGrade_r5_c1 class=’listbody’>N08904</td> <td ID=tbllvwGrade_r5_c2 class=’listbody’>904L</td> <td ID=tbllvwGrade_r5_c3 class=’listbody’></td> <td ID=tbllvwGrade_r5_c4 class=’listbody’><0.020</td> <td ID=tbllvwGrade_r5_c5 class=’listbody’><0.10</td> <td ID=tbllvwGrade_r5_c6 class=’listbody’>19.0-23.0</td> <td ID=tbllvwGrade_r5_c7 class=’listbody’>23.0-28.0</td> <td ID=tbllvwGrade_r5_c8 class=’listbody’>4.0-5.0</td> <td ID=tbllvwGrade_r5_c9 class=’listbody’>Cu:1.00-2.00 Mn:<2.00 P :<0.045 S :<0.035 Si:<1.00 </td> <td style=’display:none’><input ID=’hdnID’ type=’hidden’ value=”></td> <td style=’display:none’><input ID=’hdnKey’ type=’hidden’ value=’79535key’></td> </tr> </TBODY> <TFOOTER><tr ID=”tblfooter”><td></td></tr></TFOOTER> </table> [/code]

to post a comment

JavaScript

6 Comments(s) _↴

@FangSep 03.2003 — #Your code crashed IE !

A couple of problems first:

it's "javascript" not "java script"

the text in td shloud be

"Al:0.15-0.60 Cu:< 0.75 Fe:>39.5 Mn:" not

"Al:0.15-0.60 Cu:> 0.75 Fe:>39.5 Mn:"

Without the css the code changes any td in that tr to blue,

upto but not including the last empty cell.

What the effect is with the css I can't tell without the css.

@onerrorgotoauthorSep 03.2003 — #Hello

Thanks for trying to help me.

weird that it crashes IE?

in my sourcecode its javascript, must be some glitch in the fourm.

"Al:0.15-0.60 Cu:> 0.75 Fe:>39.5 Mn:" is recieved from a DB, nothing I can do right now. maybe later I can do a replace-function when i fill the table.

the css just sets the font, height & bgcolor for each <td>

I just cut out a small part of the table for clarification on the script since Im doing getelementbyID. I get the row as inparam with the onclick and then I use that to get the tableID since each rowID contains the tableid + rownr.

ex:

tblX = table ID

tblX_r0 = first row i tblX

tblX_r0_c1= first column in tblX_r0

and so on...

I have figured out this much myself.

I need to iterate through each <td>, and set the bgcolor on it, in the affected row.

I also need to iterate through every <td> in the table and remove the bgcolor so that the <td> uses my stylesheet.

what is the simplest way to iterate throug each <td> in the table and set the bgcolor? and even more important how do I remove that bgcolor when i click on another row?

thanks for the help

Anders

@FangSep 03.2003 — #Seeing as this is IE specific code just iterate through the table row as you are doing now.

To change a previously set row have a global variable to store the row number/id of the set row,

when another row is clicked you reset the saved row and set the new one.

@onerrorgotoauthorSep 03.2003 — #Thank you for the reply

Yep, its IE specifik sinceour customer asked for it. but maybe in thefuture ?

just need some claryfication.

before the onclick on <tr> my <td> looks like this.

<td ID=tbllvwGrade_r0_c6 class='listbody'>32.0-38.0</td>

after the onclick it should look like this, right?

<td ID=tbllvwGrade_r0_c6 class='listbody' bgcolor='#99cccc'>32.0-38.0</td>

but how do I remove this part from the <td> when I click on another <tr>?

bgcolor='#99cccc'

or

is it easier to just change the <td> to look like this

<td ID=tbllvwGrade_r0_c6 class='listbody2'>

and make a new class in my css. but the again, how do i alter the <td>-tag's class property?

Thanks for your help

Anders

@FangSep 03.2003 — #Changing the class is to be prefered:

document.getElementById('tdID').className="someclass";

@onerrorgotoauthorSep 04.2003 — #Thank you Fang for your patience and help.

Now I just have to get everything else to work ?

Also in #JavaScript _↴

Extracting post data What is the best way to handle multiple browser in javascript?Help on a Drop Down Menu Please

Success!

Help @onerrorgoto spread the word by sharing this article on Twitter...

Tweet This

change bgcolor (have searched the forum w/o luck)

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

change bgcolor (have searched the forum w/o luck)

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴