referencing cells

[rjusa]

OK, here's what I've got:

A simple table 1x3...if you position the mouse over either cells 2 or 3, cell 1's background color turns pale yellow, no mouseover cell goes back to white...code:

<script language="JavaScript1.2">
function bchanger() {
document.getElementById("Cell1").style.backgroundColor="#ffffe0";
}
function bchanger1() {
document.getElementById("Cell1").style.backgroundColor="#ffffff";
}
</script>

<td id="Cell1" width="50%" style="border-style: solid; border-width: 1">hello cruel world!</td>
<td id="Cell2" onmouseover="bchanger()" onmouseout="bchanger1()" width="25%" style="border-style: solid; border-width: 1">
<input type="radio" name="Irrevocable" value="Yes" onmouseover="bchanger()" onmouseout="bchanger1()" onClick="document.fgColor='red'"><font face="Arial" size="2" color="#000000">Yes</font></td>
<td id="Cell3" onmouseover="bchanger()" onmouseout="bchanger1()" width="25%" style="border-style: solid; border-width: 1">
<input type="radio" name="Irrevocable" value="Yes" onmouseover="bchanger()" onmouseout="bchanger1()" onClick="document.fgColor='red'"><font face="Arial" size="2">No</font></td>

Well, in reality the table is more like 150x3...how can I generalize this routine without writing 300 "document.getElementById("Cell?")" statements? Any suggestions would be greatly appreciated.

Thanks,
Ron

[Gollum]

You can take advantage of the fact that your groups of three cells are all on the same row and the first of the three is the first in the row...

function bchanger(oCell, c)
{
// oCell is the cell with the mouseover/out
// c is the colour to change cell1 to
oCell.parentNode.childNodes[0].style.backgroundColor = c;
}
...

<td id="Cell1" width="50%" style="border-style: solid; border-width: 1">hello cruel world!</td>
<td id="Cell2" onmouseover="bchanger(this,'#ffffe0');" onmouseout="bchanger(this,'#ffffff');" width="25%" style="border-style: solid; border-width: 1">
<input type="radio" name="Irrevocable" value="Yes" onmouseover="bchanger(this,'#ffffe0');" onmouseout="bchanger(this,'#ffffff');" onClick="document.fgColor='red'"><font face="Arial" size="2" color="#000000">Yes</font></td>
<td id="Cell3" onmouseover="bchanger(this,'#ffffe0');" onmouseout="bchanger(this,'#ffffff');" width="25%" style="border-style: solid; border-width: 1">
<input type="radio" name="Irrevocable" value="Yes" onmouseover="bchanger(this,'#ffffe0');" onmouseout="bchanger(this,'#ffffff');" onClick="document.fgColor='red'"><font face="Arial" size="2">No</font></td>