Forum Moderators: not2easy

Message Too Old, No Replies

Change multiple td backgrounds

         

GeXus

4:13 pm on Apr 23, 2006 (gmt 0)

10+ Year Member



Hello, I would like to have something where when I mouseover one TD, it changes the background color. This I can do. But I want to be able to have it change more TD backgrounds also.. So if I mouse over TD1, TD1 changes, along with TD2, TD3 and TD4..

Any idea on how to do this?

Thanks!

Moby_Dim

9:07 pm on Apr 23, 2006 (gmt 0)

10+ Year Member



Use DOM. Assign each target cell the same class. Do something like this :
<head>
<style type="text/css">
<!--
.ch {background-color : #ff0;}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
function chc() {
var tables = document.getElementsByTagName("table");
for(var a = 0; a < tables.length; a++) {
var tds = tables[a].getElementsByTagName("td");
for(var b = 0; b < tds.length; b++) {
var tdd;
if(navigator.appName == 'Microsoft Internet Explorer') {
tdd = tds[b].attributes["class"].value
}
else {//FF, Opera
tdd = tds[b].getAttribute("class")
}

if(tdd == 'ch') {
tds[b].style.backgroundColor = "#f00";
}
}
}

}
// -->
</script>
</head>
<body>
<table width="100%" cellspacing="2" border="2">
<tr><td class="ch" onmouseover="chc()">1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td class="ch" onmouseover="chc()">6</td></tr>
</table>
<br>
<table width="100%" cellspacing="2" border="2">
<tr><td class="ch" onmouseover="chc()">1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td class="ch" onmouseover="chc()">6</td></tr>
</table>
</body>
</html>

Browser sniffing is not good thing here, but you'll get the idea.