Forums

This topic is locked

Table colors

Posted 20 May 2003 12:18:14
1
has voted
20 May 2003 12:18:14 zabi baig posted:
how to change the color of a column or row on mouse click using javascrit?

Pls help

Regards
zab

Replies

Replied 20 May 2003 12:50:55
20 May 2003 12:50:55 james crellin replied:
Zabi -
Usually you have something like the code below that makes up your table or cell.
Paste the bold red portion of it into the <TD tag. It should look like the code below. Change the green portion of the code to change the colors. You can use a hex code (ie: #FF6000) or use primary text colors (ie: red, blue, lightblue...)
=============================================
<TABLE width="200" border="1" cellspacing="0" cellpadding="0">
<TR>
&lt;TD style="width:100%; background-color:<font color=green>lightblue</font id=green>"
<font color=red><b>onMouseover="this.style.backgroundColor='<font color=green>yellow</font id=green>';"
onMouseout="this.style.backgroundColor='<font color=green>lightblue</font id=green>';"&gt;</b></font id=red>
Watch me get scared!
&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
=============================================
I hope that helps you out some.

<img src="www.syndicprint.com/o_chacon/jtc_sig.gif" border=0>
<b>"I learn so I can help."</b> =- Saleblitz
Replied 20 May 2003 14:19:04
20 May 2003 14:19:04 zabi baig replied:
Hi Saleblitz,
Thanks for ur help!

This code works, but my requirement is that once i click on table header of a column i need to change the color of entier columnn and vice versa of rows. and again i clikck on column or row it should come to normal.. any idea how it works .

Thanks
zabi
Replied 20 May 2003 20:56:38
20 May 2003 20:56:38 james crellin replied:
Hey Zab-
I'm pretty sure i understand what you are wanting now. However, I can only get it to change the row color. Try this code that I found below. Maybe it will work for you somehow or you can change it a little bit. I dont have time to try and reconfigure it right now. Good Luck!
-=- saleblitz
========================================================
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
//+-+-+-+-+-+-+-+-+-+-+-+-+for highlight row+-+-+-+-+-+-+-+-+-+-+-+-+//
//desc: Highligt current row by click any cell
//by: Qing-Hua Jiang
//argument: backColor - highlight bgColor of the row
// textColor - lighlight text color
//call: like &lt;tr onClick="HighLightTR('#c9cc99','cc3333');" id="trO4"&gt;

var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(backColor,textColor){
if(typeof(preEl)!='undefined') {
preEl.bgColor=orgBColor;
try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
}
var el = event.srcElement;
el = el.parentElement;
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;

try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el;
}
function ChangeTextColor(a_obj,a_color){ ;
for (i=0;i&lt;a_obj.cells.length;i++){//put condition before increase!!!!!
a_obj.cells(i).style.color=a_color;
}
}

//+-+-+-+-+-+-+-+-+-+-+-+-+End of highlight row+-+-+-+-+-+-+-+-+-+-+-+-+//
&lt;/script&gt;


&lt;/head&gt;
&lt;body&gt;

&lt;table border=1 align=center&gt;
&lt;caption&gt;Hank Greenberg Career Statistics&lt;/caption&gt;
&lt;th&gt;Year&lt;/th&gt;
&lt;th&gt;Team&lt;/th&gt;
&lt;th&gt;AVG&lt;/th&gt;
&lt;th&gt;AB&lt;/th&gt;
&lt;th&gt;R&lt;/th&gt;
&lt;th&gt;H&lt;/th&gt;
&lt;th&gt;Double&lt;/th&gt;
&lt;th&gt;Triple&lt;/th&gt;
&lt;th&gt;HR&lt;/th&gt;
&lt;th&gt;RBI&lt;/th&gt;
&lt;th&gt;BB&lt;/th&gt;
&lt;th&gt;SO&lt;/th&gt;
&lt;th&gt;SB&lt;/th&gt;
&lt;tr onClick="HighLightTR('#c9cc99','cc3333');" &gt;
&lt;td align=right&gt;1938&lt;/td&gt;
&lt;td align=right&gt;Detroit&lt;/td&gt;
&lt;td align=right&gt;.315&lt;/td&gt;
&lt;td align=right&gt;556&lt;/td&gt;
&lt;td align=right&gt;144&lt;/td&gt;
&lt;td align=right&gt;175&lt;/td&gt;
&lt;td align=right&gt;23&lt;/td&gt;
&lt;td align=right&gt;4&lt;/td&gt;
&lt;td align=right&gt;58&lt;/td&gt;
&lt;td align=right&gt;146&lt;/td&gt;
&lt;td align=right&gt;119&lt;/td&gt;
&lt;td align=right&gt;92&lt;/td&gt;
&lt;td align=right&gt;7&lt;/td&gt;
&lt;/tr&gt;
&lt;tr onClick="HighLightTR('#c9cc99','cc3333');" &gt;
&lt;td align=right&gt;1939&lt;/td&gt;
&lt;td align=right&gt;Detroit&lt;/td&gt;
&lt;td align=right&gt;.312&lt;/td&gt;
&lt;td align=right&gt;500&lt;/td&gt;
&lt;td align=right&gt;112&lt;/td&gt;
&lt;td align=right&gt;156&lt;/td&gt;
&lt;td align=right&gt;42&lt;/td&gt;
&lt;td align=right&gt;7&lt;/td&gt;
&lt;td align=right&gt;33&lt;/td&gt;
&lt;td align=right&gt;112&lt;/td&gt;
&lt;td align=right&gt;91&lt;/td&gt;
&lt;td align=right&gt;95&lt;/td&gt;
&lt;td align=right&gt;8&lt;/td&gt;
&lt;/tr&gt;
&lt;tr onClick="HighLightTR('#c9cc99','cc3333');" &gt;
&lt;td align=right&gt;1940&lt;/td&gt;
&lt;td align=right&gt;Detroit&lt;/td&gt;
&lt;td align=right&gt;.340&lt;/td&gt;
&lt;td align=right&gt;573&lt;/td&gt;
&lt;td align=right&gt;129&lt;/td&gt;
&lt;td align=right&gt;195&lt;/td&gt;
&lt;td align=right&gt;50&lt;/td&gt;
&lt;td align=right&gt;8&lt;/td&gt;
&lt;td align=right&gt;41&lt;/td&gt;
&lt;td align=right&gt;150&lt;/td&gt;
&lt;td align=right&gt;93&lt;/td&gt;
&lt;td align=right&gt;75&lt;/td&gt;
&lt;td align=right&gt;6&lt;/td&gt;
&lt;/tr&gt;
&lt;tr onClick="HighLightTR('#c9cc99','cc3333');" &gt;
&lt;td align=right&gt;1941&lt;/td&gt;
&lt;td align=right&gt;Detroit&lt;/td&gt;
&lt;td align=right&gt;.269&lt;/td&gt;
&lt;td align=right&gt;67&lt;/td&gt;
&lt;td align=right&gt;12&lt;/td&gt;
&lt;td align=right&gt;18&lt;/td&gt;
&lt;td align=right&gt;5&lt;/td&gt;
&lt;td align=right&gt;1&lt;/td&gt;
&lt;td align=right&gt;2&lt;/td&gt;
&lt;td align=right&gt;12&lt;/td&gt;
&lt;td align=right&gt;16&lt;/td&gt;
&lt;td align=right&gt;12&lt;/td&gt;
&lt;td align=right&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr onClick="HighLightTR('#c9cc99','cc3333');" &gt;
&lt;td align=right&gt;1942&lt;/td&gt;
&lt;td align=right&gt;Detroit*&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;td align=right&gt;0&lt;/td&gt;
&lt;/tr&gt;
&lt;tr onClick="HighLightTR('#c9cc99','cc3333');" &gt;
&lt;td align=center colspan=2&gt;Total&lt;/td&gt;
&lt;td align=right&gt;.313&lt;/td&gt;
&lt;td align=right&gt;5193&lt;/td&gt;
&lt;td align=right&gt;1051&lt;/td&gt;
&lt;td align=right&gt;1628&lt;/td&gt;
&lt;td align=right&gt;379&lt;/td&gt;
&lt;td align=right&gt;71&lt;/td&gt;
&lt;td align=right&gt;331&lt;/td&gt;
&lt;td align=right&gt;1276&lt;/td&gt;
&lt;td align=right&gt;852&lt;/td&gt;
&lt;td align=right&gt;844&lt;/td&gt;
&lt;td align=right&gt;58&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;center&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;
========================================================

<img src="www.syndicprint.com/o_chacon/jtc_sig.gif" border=0>
<b>"I learn so I can help."</b> =- Saleblitz

Reply to this topic