...

View Full Version : Change BG color or <tr> when a checkbox is checked



ventura
08-22-2002, 05:08 PM
i'm not sure if this is a javascript or css thing, or both.

i want to duplicate the file selection highlighting that hotmail and yahoomail uses.

it's where the user selects a checkbox and the entire <tr> background color changes. and when the user deselects the checkbox the <tr> background goes back to the original color.

beetle
08-22-2002, 06:34 PM
Post an HTML snippet of an entire table row and I'll use that to give you your result.

Oh, and it's both CSS and Javascript (which is DHTML!)

ventura
08-22-2002, 06:40 PM
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="inboundForm">
<table width="100%" border="0" cellpadding="2" align="center" cellspacing="0">
<tr bgcolor="#EDEDED" class=listhead>
<td align="center" class="fontSize10" valign="top">&nbsp;</td>
<td bgcolor="#EDEDED" width="100%" class="fontSize10" valign="top">Fax
Name</td>
<td class="fontSize10" valign="top">Pages</td>
<td class="fontSize10" valign="top">CSID<br>
<img src="/img/spacer.gif" width="90" height="1"></td>
<td class="fontSize10" valign="top">CID (Ani)<br>
<img src="/img/spacer.gif" width="100" height="1"></td>
<td class="fontSize10" valign="top">Received<br>
<img src="/img/spacer.gif" width="160" height="1"></td>
</tr>
<tr class=msgold>
<td align="center" valign="top">
<input type="checkbox" name="faxCheck" value="checkbox" >
</td>
<td valign="top"> 123456789</td>
<td valign="top">3</td>
<td valign="top">Mosaic</td>
<td valign="top">8587123967</td>
<td valign="top">12-06-01 8:53am</td>
</tr>
<tr class=msgold>
<td align="center" valign="top">
<input type="checkbox" name="faxCheck" value="checkbox" >
</td>
<td valign="top"> 256154897</td>
<td valign="top">1</td>
<td valign="top">Data On Call</td>
<td valign="top">6192235243</td>
<td valign="top">12-06-01 9:53am</td>
</tr>
<tr class=msgold>
<td align="center" valign="top">
<input type="checkbox" name="faxCheck" value="checkbox">
</td>
<td valign="top"> 159263487</td>
<td valign="top">4</td>
<td valign="top">Mosaic</td>
<td valign="top">8587123967</td>
<td valign="top">12-06-01 10:53am</td>
</tr>
</table>
</form>
</body>
</html>

beetle
08-22-2002, 06:45 PM
whoa, I just asked for one row...but that'll do :D


<script>
function doRow(b, rowObj) {
rowObj.className = (b) ? 'newClass' : 'msgold';
}
</script>

(....HTML....)

<tr class=msgold>
<td align="center" valign="top">
<input type="checkbox" name="faxCheck" value="checkbox" onClick="doRow(this.checked, this.parentNode.parentNode);">
</td>
<td valign="top"> 123456789</td>
<td valign="top">3</td>
<td valign="top">Mosaic</td>
<td valign="top">8587123967</td>
<td valign="top">12-06-01 8:53am</td>
</tr>
obviously, newClass is the class name of your 'higlighted' tr class.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum