...

View Full Version : highlight HTML table row onClick



chump2877
05-30-2006, 08:39 PM
I can;t seem to get the background color of the <tr> element to change color with this script:


<HTML>
<HEAD>
<TITLE></TITLE>

<script type="text/javascript">
<!--
function highlightRow()
{
if (document.getElementById('id23').checked)
{
document.getElementById('row23').bgcolor = '#E2E6A8';
}
}
-->
</script>

</HEAD>

<BODY>

<table>
<tr bgcolor="#CCCCCC" id="row23">

<td width="25px"><input id="id23" name="id[23]" type="checkbox" value="23" onClick="highlightRow();"></td>
<td width="150px">26 May 2006 14:25</td><td width="150px">test <test@data...></td><td width="300px">Re: testingggggggg</td>
<td width="125px">0.80 KB</td>
<td width="50px">23</td></tr>
</table>

</BODY>
</HTML>


Any help is appreciated.

chump2877
05-30-2006, 09:02 PM
nevermind, 'bgcolor' should be 'bgColor'....

how dumb is that :)

vwphillips
05-30-2006, 09:41 PM
no matter
here is a generic version


<HTML>
<HEAD>
<TITLE></TITLE>

<script type="text/javascript">
<!--
function highlightRow(obj){
var tr=obj;
while (tr.tagName.toUpperCase()!='TR'&&tr.parentNode){
tr=tr.parentNode;
}
if (!tr.col){tr.col=tr.bgColor; }
if (obj.checked){
tr.bgColor='#E2E6A8';
}
else {
tr.bgColor=tr.col;
}
}

-->
</script>

</HEAD>

<BODY>

<table>
<tr bgcolor="#CCCCCC" id="row23">

<td width="25px"><input id="id23" name="id[23]" type="checkbox" value="23" onClick="highlightRow(this);"></td>
<td width="150px">26 May 2006 14:25</td><td width="150px">test <test@data...></td><td width="300px">Re: testingggggggg</td>
<td width="125px">0.80 KB</td>
<td width="50px">23</td></tr>
</table>

</BODY>
</HTML>

chump2877
05-30-2006, 10:34 PM
I prefer to use getElementById..

This is the generic function that I'm actually using (the previous one was to isolate the problem)...still short:


function highlightRow(row_id,check_id,default_color)
{
if (document.getElementById(check_id).checked)
{
document.getElementById(row_id).bgColor = '#E2E6A8';
}
else
{
document.getElementById(row_id).bgColor = default_color;
}
}

function call:


<tr bgColor="#F0F0F0" id="row8">
<td width="25px"><input id="id8" name="id[8]" type="checkbox" value="8" onClick="highlightRow('row8','id8','#F0F0F0');"></td>
<td width="150px">23 May 2006 20:59</td><td width="150px">Aaron Johnson...</td>
<td width="300px">RE: RE: TEST</td>
<td width="125px">1.49 KB</td>
<td width="50px">8</td>
</tr>

vwphillips
05-30-2006, 10:36 PM
no accounting for taste



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum