How to change <tr> background color onclick??

Discussion in 'Programming' started by Mr. Pimp, Dec 20, 2009.

0
  1. #1
    Hello
    I need lil help regarding change of <tr> background color onclick.
    Here is the situation :
    1. I already have java script which select/deselect checkbox, on entire row click.
    2. Another java script contains "mouseover" and "mouseout" events which causes <tr> background color to change and restore.

    Please visit this page to check live demo : http://projectsplanet.org/test.html

    What i want is, when checkbox of any row is checked, the row background color should be changed. When i deselect same checkbox, row background color should be restored.

    NOTE : default row background color is unknown. (i.e. background may contain gradient image so it should be generalized for any background color).

    Following is the code of what i have done so far :
    <html>
<head>
<script language='JavaScript'>
var change_color = '#FFFFCC'
function mover(aa) {
bgcolor=aa.style.backgroundColor;
 aa.style.backgroundColor = change_color;
}
function mout(aa) {
 aa.style.backgroundColor = bgcolor;
}
function setCheckbox(e, row){
       var cbox = row.cells[0].getElementsByTagName('input')[0];
       var clickedElt = window.event? event.srcElement: e.target;
       if (clickedElt != cbox)         
         cbox.checked = !(cbox.checked);              
         }
</script>


<style type="text/css">
<!--
.aa
{
	border-style:solid;
	border-width:1px;
}
-->
</style> 


</head>
<body>
	<br /><br /><br /><br /><br /><br /><br /><br /><br />
<table width="70%" class="aa" align="center">
<tr onclick="setCheckbox(event, this);" onmouseover="mover(this);"  onmouseout="mout(this);">
<td><input type="checkbox"></td>
<td>item 2</td>
<td>item 3</td>
<td>item 4</td>
</tr>
<tr onclick="setCheckbox(event, this);" onmouseover="mover(this);"  onmouseout="mout(this);">
<td><input type="checkbox"></td>
<td>item 2</td>
<td>item 3</td>
<td>item 4</td>
</tr>
<tr onclick="setCheckbox(event, this);" onmouseover="mover(this);"  onmouseout="mout(this);">
<td><input type="checkbox"></td>
<td>item 2</td>
<td>item 3</td>
<td>item 4</td>
</tr>
<tr onclick="setCheckbox(event, this);" onmouseover="mover(this);"  onmouseout="mout(this);">
<td><input type="checkbox"></td>
<td>item 2</td>
<td>item 3</td>
<td>item 4</td>
</tr>
</table>
</body>
</html>
    Code (markup):
    Possible problems :
    1. Function mout() and mover() in javascript is causing row background color to be changed and restored on "mouseover" and "mouseout" events.

    Please consider above problem while giving solution.
    Thank you very much in advance.

    I'm also attaching the html file.
     

    Attached Files:

    Mr. Pimp, Dec 20, 2009 IP
  2. m7md_cis

    m7md_cis Peon

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    
<html>
<head>

<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode.parentNode; // this may change depending on the html used
tr.style.backgroundColor=(obj.checked)? '#FFFFCC' : 'white';
}
</script>

<style type="text/css">
.nochange, tr {background-color:white;} 
</style>


</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<table width="70%" align="center" border="0" cellspacing="1" cellpadding="1">
<tr onclick="setCheckbox(event, this);" onmouseover="mover(this);"  onmouseout="mout(this);">
<td><label><input type="checkbox" name="toggle" onclick="change(this);"></label></td>
<td>item 2</td>
<td>item 3</td>
<td>item 4</td>
</tr>
<tr onclick="setCheckbox(event, this);" onmouseover="mover(this);"  onmouseout="mout(this);">
<td><label><input type="checkbox" name="toggle" onclick="change(this);"></label></td>
<td>item 2</td>
<td>item 3</td>
<td>item 4</td>
</tr>
<tr onclick="setCheckbox(event, this);" onmouseover="mover(this);"  onmouseout="mout(this);">
<td><label><input type="checkbox" name="toggle" onclick="change(this);"></label></td>
<td>item 2</td>
<td>item 3</td>
<td>item 4</td>
</tr>
<tr onclick="setCheckbox(event, this);" onmouseover="mover(this);"  onmouseout="mout(this);">
<td><label><input type="checkbox" name="toggle" onclick="change(this);"></label></td>
<td>item 2</td>
<td>item 3</td>
<td>item 4</td>
</tr>
</table>
</body>
</html>
    Code (markup):
    Best Regards,
    Mohammad
    www.ehome-jo.com
     
    m7md_cis, Dec 20, 2009 IP
  3. Mr. Pimp

    Mr. Pimp Active Member

    Messages:
    142
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #3
    Above code doesn't include mout() and mover() functions. But yeah it does change background color of <tr>.
    I already been there. What i want is, <tr> background color to be changed along with mout() and mover() functions being there.
     
    Mr. Pimp, Dec 20, 2009 IP