How to highlight a table cell (TD) when radio button is clicked with JavaScript/JQuery?

Question

I'm developing an online baseball/softball scorebook application. I want to visually change the CSS of the specific table cell (a specific TD) when the user changes the value of one of the radio buttons inside that TD is selected.

Here is a JPG of what the table looks like: http://www.ppgeez.com/images/gt_ab.jpg

There are 12 players and each player can have a maximum of 6 AB's. The code below is an example of a single At-Bat (AB) for a player where you can specify what the player did for that particular AB.

    <td>
  <table border=1>
    <tr>
      <td>
    <table border=0 cellspacing=0 cellpadding=0>
        <tr><td><input type=radio name=p1o1 value="1B">1B
            <td><input type=radio name=p1o1 value="FO">FO
        <tr><td><input type=radio name=p1o1 value="2B">2B
            <td><input type=radio name=p1o1 value="GO">GO
        <tr><td><input type=radio name=p1o1 value="3B">3B
            <td><input type=radio name=p1o1 value="FC">FC
        <tr><td><input type=radio name=p1o1 value="HR">HR
            <td><input type=radio name=p1o1 value="SF">SF
        <tr><td><input type=radio name=p1o1 value="BB">BB
            <td><input type=radio name=p1o1 value="K" >K
        <tr><td><input type=radio name=p1o1 value="RE">RE
            <td><input type=radio name=p1o1 value="DP">DP
   </table>

      <td valign=top align=center>
        Run<br><input type=checkbox name=p1run1><br><hr>
        RBIs<br><select name=p1rbi1>
                <option value=0>0
                <option value=1>1
                <option value=2>2
                <option value=3>3
                <option value=4>4
                </select><p>
        <input type=radio name=p1o1 value="NA" checked>N/A
      <td>

  </table>
<td>

I'm want to visually highlight (by changing the background color of the TD) each AB that is 'completed'. Basically, when the form loads, the "N/A" radio button is selected by default. If any other radio button is selected (1B, 2B, K, etc...) then that TD should be highlighted. If N/A is selected again, it should be unhighlighted. I'm not sure where to start, any help would be appreciated. Thanks!

UPDATE: Final Working Code - I used a function from below, but since I was using nested tables the trick was to select the specific one I wanted using eq(x).

    $("td input[type=radio]").change(function () {
  function clearTable(){
  var table = $(this).parents('table:eq(0)');
    $(table).removeClass('selected');
  }
  $('input[value="NA"]').click(clearTable);
  var table = $(this).parents('table:eq(1)');
  if (this.value != 'NA') {    
    table.addClass('selected');
    }
}); 

UPDATE - GIVE ALL TABLES SPECIFIC CLASS

// set each table with the atBat class ABtables = $('input[type="checkbox"]').closest('table'); ABtables.each(function() { $(this).addClass('atBat'); });

Answer 1

You can create a javascript function that does this. First, check to see which one is selected, then (in a loop) get the TD. Once you have those 2 things, the rest is easy.

Here is some code to get you started:

first, you'll need to add an event handler to each radio button that points it to this function -

function handleRadioClick(e) {
    var ev = e || window.event;

    //ev.srcElement will give you the radio button clicked
    //This code will get you the TD
    var obj = ev.srcElement;
    while (obj && obj.parentElement && obj.tagName.toLowerCase() !== 'td') {
        obj = obj.parentElement
    }

    //at this point, obj should be the TD
}

I didn't do it all for you, but it should get you started.

EDIT:

I just realized that you have the radio buttons in their own TD inside of a table, inside of the TD you're after. You'll have to modify my code to get the table and then get its parent (the TD your after).

Answer 2

First, it looks like you are missing closing tags on a lot of your markup. Specifically the closing td and option tags.

With jquery, you can change the background color of the td when selected:

<input type="radio" name="p1o1" value="1B" onclick="$(this).parent().css('background', 'yellow');" />

Then to clear the selected backgrounds you would want to give write a function that, when the user clicks the N/A radio button does something like:

var $kids = $('#mytableid').children();
$kids.css("background", "#FFF");

Answer 3

You could just use this jQuery (untested, but should work):

$(document).ready(function() {          

    $("td input[type=radio]").change(function () {
        var td = $(this).parent();
        td.css("background", "#000");
    }); 
});

Also, as one of the other answers mentioned, you need to close your td and other html tags.

Answer 4

Table cell highlight

$(function(){
  function clearTable(){
    $('td.selected', table).removeClass('selected');
  }
  var table=$('input[value="1B"]').closest('table');
  $('input[value="NA"]').click(clearTable);
  $(':radio', table).click(function(){
    clearTable();
    $(this).closest('td').addClass('selected');
  });
});

EDITED CODE IN RESPONSE TO COMMENTS

//assuming you've given the class atBat to any table which might be selected
$('table.atBat').each(function(){
  var table=$(this);//cache the current iteration
  var childTable=table.find('table:first');
   //replace above click handler with this
   $(':radio', childTable).click(function(){
    if ($(this).val()==='NA'){
      table.removeClass('selected');
    }
    else {
     table.addClass('selected');
    }
   });
})

Hope this helps, good luck!