Hi all,
I am trying to make it so that the style "RowSelected" (embedded
below) is applied to the table row from which the radio button is
selected, and then removed when a different radio button is clicked.
Right now, the below code kinda works. The javascript was copied from
an example on a website from which I forgot the URL. It only applies
the style properties to the label text, and not to the row.
If anyone can help, I would really appreciate it. Thanks!
Here is what I have so far:
* * * * * * * * * * * * * * * * * * * * * * * * * * *
<html>
<style type="text/css">
<!--
..RowSelected {
color: blue;
font-weight: bold;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
function styleToggle(rdoVar) {
for ( var i = 0; i < rdoVar.form.length; i++){
if (rdoVar.form[i].name == rdoVar.name) {
rdoVar.form[i].parentNode.style.color = rdoVar.form[i].checked?
'red' : '';
rdoVar.form[i].parentNode.style.fontWeight =
rdoVar.form[i].checked? 'bold' : '';
}
}
}
</script>
<form>
<table width="100%" border="1">
<tr>
<td><input type="radio" name="InterestingItem" id="afdsa"
value="Item 01" onClick="styleToggle(this)" />
Item 01</td>
<td>Description 01</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afdasfd"
value="Item 02" onClick="styleToggle(this)" />
Item 02</td>
<td>Description 03</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afadf"
value="Item 03" onClick="styleToggle(this)" />
Item 03</td>
<td>Description 03</td>
</tr>
</table>
</form>
</body>
</html>
