Apply CSS style for table row if radio button is clicked

I

iwasjoeking

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.name == rdoVar.name) {
rdoVar.form.parentNode.style.color = rdoVar.form.checked?
'red' : '';
rdoVar.form.parentNode.style.fontWeight =
rdoVar.form.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>
 
C

chatterman

styleToggle( this)

'this' refers to the input object

the parentNode of the input object is the <td> containing the <input>

the parentNode of the <td> is the <tr> object

so

function styleToggle(rdoVar){

var tdNode= rdoVar.parentNode;
var trNode= tdNode.parentNode;

if( rdoVar.checked ){
trNode.style.color = "red";
trNode.style.fontWeight = "bold";
}else{
// etc..
}
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top