Log in

View Full Version : Change border color of table for current row only



ismailc
10-21-2008, 05:54 PM
Hi, need help please!

I have a table within a table, the background color of table is blue to match the background color of my <td>.

but now i want onmouseover to change the background color of the <td> which i do but the row in between the colommns have a blue color.

<tr class="tbDetailNew">
<td width="8%">&#160;</td>
<td colspan="6">
<table id="test" style="border:none; backgound-color:blue;" width='100%'>
<tr>
<td onmousemove="style.backgroundColor = 'white';"document.getElementById('test').style.backgroundColor = 'white';">

i get it to change the table backgound color but then it changes for all the rows within the table - i just want to the row i'm on.

Please Assist.

Nile
10-22-2008, 03:09 AM
<td onmousemove="style.backgroundColor = 'white';"document.getElementById('test').style.backgroundColor = 'white';">
The highlighted should be:
this.style.backgroundColor
And what element has the ID test?
[edit]
If I understand what you want, I think this should work:


<script type="text/javascript">
var trRows = function(e){
var el = document.getElementById(e);
var tr = el.getElementsByTagName('tr');
for(i=0,color=new Array();i<tr.length;++i){
tr[i]["onmouseover"] = function() { this.style.backgroundColor = "yellow"; };
tr[i]["onmouseout"] = function() { this.style.backgroundColor = "#FFF"; };
}
}
</script>
<table id="hovTable" border="1">
<tr><td>Array1</td><td>Dog</td><td>Cat</td><td>Horse</td></tr>
<tr><td>Array2</td><td>Ferrari</td><td>Mustang</td><td>Hummer</td></tr>
<tr><td>Array3</td><td>Clouds</td><td>Sun</td><td>Stars</td></tr>
<tr><td>Array4</td><td>Orange</td><td>Apple</td><td>Banana</td></tr>
</table>
<script type="text/javascript">
window.onload = trRows('hovTable');
</script>
Although if you give a tr a bg color, it won't return. If your giving your tr[s] bg colors that are different then all the other tr[s], then tell me and I'll make it happen.

ismailc
10-22-2008, 06:23 AM
Thank You for the assist.

It's not more of a javascript but a css.

when I'm on the row I change the td & the table background color.
which works - but then all the other rows have a different backgroundcolor because i changed it on the current row. But now all the other rwos have blue td with thin strips of black showing from the table color change.

Regards

Nile
10-23-2008, 02:41 AM
If you want it for css. Just take a look at some tutorials. I don't understand the last part you were saying in the post above...

ismailc
10-23-2008, 06:17 AM
Thank you - and my apologies.

As I know what i'm doing but explainng what i'm doing is a week point of mine.

Thank You - i dropped the table - so don't need to change the color as i'm pressured on time.