Forum Moderators: open
Thanks for any help.
Try this below. It's basic, but it expresses the ideas.
You can navigate the table using element relationships
- a cell's row is the cell's parentNode.
You can get the index of rows/cells using the rowIndex/cellIndex properties.
There are better ways of handling events. The mouseovers/outs could be added dynamically, for instance. The script could be made more generic by not relying on the id of the table being hard-coded - but that would complicate the issue.
Use CSS in a stylesheet for any normal styling, then the highlight color can be removed by sending an empty string to the element's inline style object (as in the script below).
<html>
<head>
<title>What? No bananas?</title>
<script language="javascript" type="text/javascript">CELL_HIGHLITE_COLOR = "#00FFFF"
function doCellAbove(cell,boolean)
{
var table = document.getElementById('tab');
var rowIndex = cell.parentNode.rowIndex-1;
var cellAbove = table.rows[rowIndex].cells[cell.cellIndex];
cellAbove.style.backgroundColor
= (boolean)? CELL_HIGHLITE_COLOR : "";
}
</script>
</head><body>
<table id="tab">
<tr>
<td>upper cell</td>
</tr>
<tr>
<td onmouseover="doCellAbove(this,1)"
onmouseout ="doCellAbove(this,0)">lower cell</td>
</tr>
</table>
</body>
</html>
<table border="1">
<tr>
<td
onMouseOver="document.all.cell2.bgColor=0x00FFFF"
onMouseOut="document.all.cell2.bgColor=0xFFFFFF">
Cell One
</td>
<td id="cell2">
Cell Two
</td>
</tr>
</table>
P.S. I use the document.all just to make sure I get the cell I am looking for..
-- Zak
I used the name 'boolean' for 2nd the argument. It is in fact a number. This was simply to save space. It is evaluated as boolean {1:true, 0:false}.
Thing is, by using the word 'boolean', I have stumbled into some area of Mozilla Javascript that I haven't come across before. It's almost as if Firefox is supporting Javascript v2.
Still the solution is simple: Change the argument's name to something else eg 'highlite'.
(That'll be 2 changes). Then it's OK.
More importantly, document.all only works in Internet Explorer (actually Opera too).
That would be DHTML mistake #4, I reckon ;)
tested, and behold -- the 'Mighty Marx' is right...
The doc.all isn't supported by Mozillla. I was unaware of this, but then again I've never used it. I just remembered reading about it ... hence the 'theoretically' in my previous post. :0)
-- Zak
