[thelist] help with JS highlighting of <td> onclick

Dave Land land at aol.com
Mon Jun 9 18:41:58 CDT 2008


On Jun 9, 2008, at 2:46 PM, Bruce Gilbert wrote:

> Can anyone help me with some JS. I have an input select checkbox
> within a <TD> Tag and I want the whole cell to highlight when you
> click the checkbox, and remain highlighted throughout the process.
> There should be the ability for the user to higlight for than one box
> of course. The form has to be named since there are more than one form
> on the page.
>
> the HTML code is pulling results from a MySQL table is looks like  
> this:
>
> echo '<td><input type="checkbox" name="grid[]" value="'.$row['ID'].'"
> '.$chk.' /></td>

Here's a really simplistic sample that I _think_ does what you want:  
When the checkbox in any of the three cells is checked, its cell  
background is set to yellow; otherwise, it is set to transparent.

Obviously, you wouldn't want to repeat the same darn code in every  
cell (but would move it up into a function in the head), and nobody  
who has the slightest love for people who might have to update his  
code later would use style attributes (but would instead use classes  
and CSS declarations), but I hope this steers you in the right  
direction...

<html>
<head>
<title>test</title>
</head>
<body>
<form name="theform">
<table style="background-color: green;">
<tr>
    <td id="row1"><input type="checkbox" name="row1"  
onclick="javascript:if(document.theform.row1.checked) 
{thecolor 
= 
'yellow 
'}else 
{thecolor 
= 
'transparent 
'};document.getElementById('row1').style.backgroundColor=thecolor" / 
 >one</td>
    <td id="row2"><input type="checkbox" name="row2"  
onclick="javascript:if(document.theform.row2.checked) 
{thecolor 
= 
'yellow 
'}else 
{thecolor 
= 
'transparent 
'};document.getElementById('row2').style.backgroundColor=thecolor" / 
 >two</td>
    <td id="row3"><input type="checkbox" name="row3"  
onclick="javascript:if(document.theform.row3.checked) 
{thecolor 
= 
'yellow 
'}else 
{thecolor 
= 
'transparent 
'};document.getElementById('row3').style.backgroundColor=thecolor" / 
 >three</td>
</tr>
</table>
</form>
</body>
</html>




More information about the thelist mailing list