JavaScript to Change Color of Selected Row

Saturday, June 17, 2006

Here's a small JavaScript to change the colour of the row you select by a radio button:

Search Engine Marketing - Build Static Pages<script language="JavaScript">
var gbTrow;
var callit;
callit = false;

function chgcolor(tr1)
{
trow = document.getElementById("trid"+tr1);

if (callit==false)
{
callit = true;
}
else
{
gbTrow.bgColor = "red";
}

trow.bgColor = "green";
gbTrow = trow;
return true;
}
</script>


Here's the structure of the table to test this script:

<table width=18% border=1 align="center" cellpadding=2 cellspacing=2>
<tr>
<td width="10%">radio</td>
<td width="90%">options</td>
</tr>
<tr bgcolor='red' id='trid1'>
<td><input type=radio name=rd id='rd1' value='' onClick="return
chgcolor('1');"></td>
<td>Option 1</td>
</tr>
<tr bgcolor='red' id='trid2'>
<td><input type=radio name=rd id='rd2' value='' onClick="return
chgcolor('2');"></td>
<td>Option 2</td>
</tr>
<tr bgcolor='red' id='trid3'>
<td><input type=radio name=rd id='rd3' value='' onClick="return
chgcolor('3');"></td>
<td>Option 3</td>
</tr>
</table>

2 comments:

Anonymous said...

script does not work!
rows are not changing color
copy paste script and you'll see

Gurpreet Singh Modi said...

hi...
it worked perfectly in older browsers...

for new browsers, just change onClick="return chgcolor('1');" to onClick="chgcolor('1');" - remove return statement.

Post a Comment