Apply CSS style for table row if radio button is clicked

Discussion in 'Javascript' started by iwasjoeking, Jun 6, 2007.

  1. iwasjoeking

    iwasjoeking Guest

    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>
     
    iwasjoeking, Jun 6, 2007
    #1
    1. Advertising

  2. iwasjoeking

    chatterman Guest

    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..
    }
    }
     
    chatterman, Jun 6, 2007
    #2
    1. Advertising

  3. iwasjoeking

    iwasjoeking Guest

    That did the trick.

    Thanks Chatterman!
     
    iwasjoeking, Jun 7, 2007
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Leeor Geva
    Replies:
    1
    Views:
    833
    Leeor Geva
    Aug 30, 2003
  2. Shiperton Henethe
    Replies:
    5
    Views:
    1,111
    Adrienne
    Sep 19, 2003
  3. djjohnst
    Replies:
    0
    Views:
    356
    djjohnst
    Jun 6, 2007
  4. albert kao
    Replies:
    1
    Views:
    2,025
    marisa lee
    Apr 10, 2010
  5. Hiten
    Replies:
    1
    Views:
    632
    Vidar Petursson
    May 26, 2004
Loading...

Share This Page