Changing Style with JS

[moiseszaragoza]

I have a TD that i want to change the style on a TD when i click on it.


<script language="javascript" type="text/javascript">
function showstuff(boxid){
document.getElementById('td_Contact').style="new";
}
</script>

<table width="100" >
<tr>
<td class="tab_normal" id="td_Contact">
<a onClick="showstuff('Contact')" class="tab_nav">Contact</a>
</td>


Thanks for all the help

[tfburges]

You'll need to either set each of the style attributes individually like so:
<td class="tab_normal" id="td_Contact" onClick="this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF';">
<a onClick="showstuff('Contact')" class="tab_nav">Contact</a>
</td>
this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF'; could also be made into a javascript function (that you'd call onClick of course)... if you expect to use it multiple times.

Or you can set the class of the table cell (if that CSS class exists of course) to change its style like so:

var IE = /*@cc_on!@*/false;
function SetClass(Class) {
if (Class) {
try {
if (IE) {
this.setAttribute('className', Class);
} else {
this.setAttribute('class', Class);
}
} catch (e) {
try {
if (IE) {
this.setAttribute('className', Class);
} else {
this.setAttribute('class', Class);
}
} catch (e) {
//alert(e);
}
}
}
}
Usage:
<td class="tab_normal" id="td_Contact" onClick="SetClass('SomeClass');">
<a onClick="showstuff('Contact')" class="tab_nav">Contact</a>
</td>
Or if you want to keep the tab_normal class:
<td class="tab_normal" id="td_Contact" onClick="SetClass('tab_normal SomeClass');">
<a onClick="showstuff('Contact')" class="tab_nav">Contact</a>
</td>


EDIT:
You can also do this:
<td class="tab_normal" id="td_Contact" onClick="this.setAttribute('style', 'background:#FF0000;color=#FFFFFF');">
<a onClick="showstuff('Contact')" class="tab_nav">Contact</a>
</td>