...

View Full Version : Table cell rollover



Ultragames
03-26-2005, 06:29 AM
I am not really a javascript programer. My years of Java and PHP have given me programming experiance, but it seems JS is just to different.

What I am trying to do is rollover one/any of the cells in a given row, and have that, and all other cells in the row change class.
(Not bgcolor, as this changes via PHP)

I can use PHP to insert a count into the id of each cell, so you have something like...
<tr><td id='row1col1'>Stuff</td><td id='row1col2'>Stuff</td><td id='row1col3'>Stuff</td></tr>
//Rollover anything in row: 1, and all cells in row: 1 change class
<tr><td id='row2col1'>Stuff</td><td id='row2col2'>Stuff</td><td id='row2col3'>Stuff</td></tr>
<tr><td id='row3col1'>Stuff</td><td id='row3col2'>Stuff</td><td id='row3col3'>Stuff</td></tr>
If anyone can help, please do. Thank you alot.

_Aerospace_Eng_
03-26-2005, 08:37 AM
here is one way

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.red {
background-color:#FF0000;
}
</style>
<script type="text/javascript"><!--
function changeclass(whatid1,whatid2,whatid3,whatclass){
document.getElementById(''+whatid1+'').className=''+whatclass+'';
document.getElementById(''+whatid2+'').className=''+whatclass+'';
document.getElementById(''+whatid3+'').className=''+whatclass+'';
}
//-->
</script>
</head>

<body>
<table>
<tr><td id='row1col1' onmouseover="changeclass(this.id,'row1col2','row1col3','red')" onmouseout="changeclass(this.id,'row1col2','row1col3','')">Stuff</td>
<td id='row1col2' onmouseover="changeclass(this.id,'row1col1','row1col3','red')" onmouseout="changeclass(this.id,'row1col1','row1col3','')">Stuff</td>
<td id='row1col3' onmouseover="changeclass(this.id,'row1col1','row1col2','red')" onmouseout="changeclass(this.id,'row1col1','row1col2','')">Stuff</td></tr>
//Rollover anything in row: 1, and all cells in row: 1 change class
<tr><td id='row2col1'>Stuff</td><td id='row2col2'>Stuff</td><td id='row2col3'>Stuff</td></tr>
<tr><td id='row3col1'>Stuff</td><td id='row3col2'>Stuff</td><td id='row3col3'>Stuff</td></tr>
</table>
</body>
</html>

Harry Armadillo
03-26-2005, 09:25 AM
Do the table cells need to be styled individually? If not, do the whole row with
<tr class='normalclass' onmouseover="this.className='hoverclass' " onmouseout="this.className='normalclass' ">If only special cells are allowed to trigger rollover of the row, try
function rolloverRow(target, newclass){
var tds=target.parentNode.getElementsByTagName('td');
var i=tds.length;
while(i--)
tds[i].className=newclass;
}

<td class='normalclass' onmouseover="rolloverRow(this,'hoverclass')" onmouseout="rolloverRow(this,'normalclass')">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum