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

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!