Log in

View Full Version : Need slight script modification please


711
04-15-2009, 05:20 PM
This script:

http://www.dynamicdrive.com/dynamicindex11/highlighttable.htm

...is almost exactly what I'm trying to accomplish, with two differences. The above script applies itself to every cell expect those specified not to (whereas I want it to apply only to those it's specifically told to apply to). Secondly, and more complicatedly, I need the script to highlight both the cell moused over, and another specified cell as well. To demonstrate what I mean, the table looks like this:


CELL1 | CELL2
CELL3(A) | CELL4(B)
CELL5(B) | CELL6
CELL7(A) | CELL8

What I want is when either CELL3 or CELL7 is moused over, both cells will become highlighted, and when either CELL4 or CELL5 is moused over, both of THOSE cells will be highlighted, that is, mousing over 3 highlights 3 and 7, mousing over 4 highlights 4 and 5, mousing over five highlights 4 and 5, and mousing over 7 highlights 3 and 7.

Thanks in advance for any assistance. I'm very helpless.
vwphillips
04-16-2009, 01:24 PM
<html>

<head>
<title></title>
<style type="text/css">
.col1 {
background-Color:white;

}

.col1on {
background-Color:red;

}
.col2 {
background-Color:white;

}

.col2on {
background-Color:green;

}

</style>
<script type="text/javascript">


function InitColor(id,cls){
var table=document.getElementById(id);
var rows=table.rows;
for (var z0=0;z0<rows.length;z0++){
if (rows[z0].className&&rows[z0].className==cls){
rows[z0].onmouseover=function(){ HiLight(rows,cls,true); }
rows[z0].onmouseout=function(){ HiLight(rows,cls,false); }
}
}
}

function HiLight(rows,cls,onoff){
for (var z0=0;z0<rows.length;z0++){
if (rows[z0].className&&(rows[z0].className==cls||rows[z0].className==cls+'on')){
rows[z0].className=cls+(onoff?'on':'');
}
}
}

</script></head>

<body onload="InitColor('tst','col1');InitColor('tst','col2');">
<table id="tst" width="200" border="1" >
<tr class="col1" >
<td>Row 1</td>
</tr>
<tr class="col2">
<td>Row 2</td>
</tr>
<tr class="col1">
<td>Row 3</td>
</tr>
</table>
</body>

</html>
711
04-17-2009, 02:48 PM
That's the idea, but that lights up whole rows, not just cells. Can it be modified for just cells? (you know, to work in tables with more than one column :)

And while I have you, is there any way to make it apply across multiple tables? For instance, linking table1, cell2 with table2, cell6? (not as big a deal as the cells thing if it's too much trouble)

Thanks!