[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