PDA

View Full Version : Change and lock table row BgColor on image click



Arc
Sep 15th, 2007, 01:02 AM
Hey guys.

I have a dynamicaly created set of tables via PHP. Each table has one row. Each row has one image in a cell of that row.

What I want to do is make the bgColor of the row change when the image in that row is clicked and have that row stay that color until another image is clicked in a different row.

Here is the code I am currently using..I am getting no errors, but it just doesn't do anything. There is also code that changes the bgColor on mouseover and mouse out (which works fine), but I would like those to be disabled on the row that clicked on as well.



<script language="JavaScript" type="text/JavaScript">
<!--
function lockColor(rowID){
window.document.getElementById(rowID).bgGolor = '#FF0000';
}
//-->
</script>

<?php
$counter=0;
for($i=0; $i<$numRows; $i++){
$anyRow = $db->getAnyRow($i);
$ro = $anyRow['JobNumber'];
$jobID = $anyRow['JobID'];
$customerName = $anyRow['OwnerName'];
$make =$anyRow['Make'];
$model = $anyRow['Model'];
$year = $anyRow['Year'];
$color = $anyRow['Color'];
$vin = $anyRow['VinNum'];
?>
<table width="100%" border="0" cellpadding="0" cellspacing="1" >
<tr id="<?php echo $counter; ?>" onMouseOver="this.bgColor='<?php echo $listHighlightColor; ?>';" onMouseOut="this.bgColor='#FFFFFF';">
<td width="19%"><div align="center" class="small-text"><?php echo $customerName;?></div></td>
<td width="22%"><div align="center" class="small-text"><?php echo $insuranceName; ?></div></td>
<td width="5%"><div align="center" class="small-text"><?php echo $year; ?></div></td>
<td width="8%"><div align="center" class="small-text"><?php echo $make; ?></div></td>
<td width="16%"><div align="center" class="small-text"><?php echo $model; ?></div></td>
<td width="8%"><div align="center" class="small-text"><?php echo $color; ?></div></td>
<td width="16%"><div align="center" class="small-text"><?php echo $vin; ?></div></td>
<td width="4%"><div align="center"><a href="job_add3.php?JobID=<?php echo $jobID; ?>" target="content"><img src="images/icon_add.gif" width="20" height="20" border="0" onClick="lockColor(<?php echo $counter; ?>)"></a></div></td>
</tr>
</table>
<?php
$counter++;
} // End for
}// end if
?>


Thanks a lot for the help guys..this is driving me nuts!:thumbsup:

Arc
Sep 15th, 2007, 01:11 AM
That should say bgColor not bgGolor....I also tried style.bgColor with no luck...

Basscyst
Sep 15th, 2007, 01:15 AM
var lastobj=null;
function lockBG(obj){
if(lastobj){
unlockBG();
}
obj.parentNode.parentNode.style.backgroundColor='#336699';
lastobj=obj;
}
function unlockBG(){
lastobj.style.backgroundColor='#FFFFFF';
}


call it like this:


<img src="whatever.gif" onclick="lockBG(this);" alt="whatever" />

Arc
Sep 15th, 2007, 01:15 AM
Arg...ok Never mind about making the color change, I figured that out..was a simple typo.

However, I still have this issue of locking the new in place with the mouseover and mouseout colors. In other words, once the row is clicked and changes to red, I would like it to stay red untill another row is clicked on even if the mouse is rolled over it.

thanks!

Arc
Sep 15th, 2007, 01:20 AM
var lastobj=null;
function lockBG(obj){
if(lastobj){
unlockBG();
}
obj.parentNode.parentNode.style.backgroundColor='#336699';
lastobj=obj;
}
function unlockBG(){
lastobj.style.backgroundColor='#FFFFFF';
}


call it like this:


<img src="whatever.gif" onclick="lockBG(this);" alt="whatever" />


Thank you, very Interesting. However there are a couple of issues with that code. It only changes the single cell instead of the whole row and when I click another row I have tow cells highlighted when there should only be one row highlighted at a time.

It looks promising though, thanks!

Basscyst
Sep 15th, 2007, 01:23 AM
In your mouseover / outs check the backgroundcolor of the row before you change it's color on mouseover / out.



if(obj.style.backgroundColor.toLowerCase()=='#ff0000'){
//do the color changing stuff
}



Thank you, very Interesting. However there are a couple of issues with that code. It only changes the single cell instead of the whole row and when I click another row I have tow cells highlighted when there should only be one row highlighted at a time.

Oh, my bad, change it to:


function unlockBG(){
lastobj.parentNode.parentNode.style.backgroundColor='#FFFFFF';
}

Basscyst
Sep 15th, 2007, 01:38 AM
Heh, that was kinda fun. Tested, here's a working example.
http://dev.rateprice.com/dev/helptable.asp


<html>
<head>
<script type="text/javascript">
var lastobj=null;
function lockBG(obj){
if(lastobj){
unlockBG();
}
obj=obj.parentNode.parentNode;
obj.style.backgroundColor='#FF0000';
lastobj=obj;
}
function unlockBG(){
lastobj.style.backgroundColor='#FFFFFF';
}
var lasthover=null;
function hoverBG(obj){
if(obj!=lastobj){
obj.style.backgroundColor='#336699';
lasthover=obj;
}
}
function clearHoverBG(obj){
if(lastobj){
if(obj!=lastobj){
lasthover.style.backgroundColor='#FFFFFF';
}
}else{
lasthover.style.backgroundColor='#FFFFFF';
}
}
</script>
</head>
<body>
<table>
<tbody>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
<tr onmouseover="hoverBG(this);" onmouseout="clearHoverBG(this);">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><img src="images/help_q.jpg" alt="click me" onclick="lockBG(this);" /></td>
</tr>
</tbody>
</table>
</body>
</html>


Basscyst

Arc
Sep 15th, 2007, 01:49 AM
Very cool! Thanks for the help. I came up with a similar version that does the same thing using a combination of JS and PHP thanks to your help.

Great job there.:thumbsup:

Basscyst
Sep 15th, 2007, 01:55 AM
I realized you wanted it to mouseover when you hover over any part of the row, so that's been adjusted. I know you have your own solution, but I fixed it anyway, I'm just thorough like that. ;p