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:

<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>