Databases
StackOverflow2013
Postsdbo
POHow to highlight a table cell (TD) when radio button is clicked with JavaScript/JQuery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to highlight a table cell (TD) when radio button is clicked with JavaScript/JQuery?
    text
    copied!<p>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.</p> <p>Here is a JPG of what the table looks like: <a href="http://www.ppgeez.com/images/gt_ab.jpg" rel="nofollow noreferrer">http://www.ppgeez.com/images/gt_ab.jpg</a></p> <p>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.</p> <pre><code> &lt;td&gt; &lt;table border=1&gt; &lt;tr&gt; &lt;td&gt; &lt;table border=0 cellspacing=0 cellpadding=0&gt; &lt;tr&gt;&lt;td&gt;&lt;input type=radio name=p1o1 value="1B"&gt;1B &lt;td&gt;&lt;input type=radio name=p1o1 value="FO"&gt;FO &lt;tr&gt;&lt;td&gt;&lt;input type=radio name=p1o1 value="2B"&gt;2B &lt;td&gt;&lt;input type=radio name=p1o1 value="GO"&gt;GO &lt;tr&gt;&lt;td&gt;&lt;input type=radio name=p1o1 value="3B"&gt;3B &lt;td&gt;&lt;input type=radio name=p1o1 value="FC"&gt;FC &lt;tr&gt;&lt;td&gt;&lt;input type=radio name=p1o1 value="HR"&gt;HR &lt;td&gt;&lt;input type=radio name=p1o1 value="SF"&gt;SF &lt;tr&gt;&lt;td&gt;&lt;input type=radio name=p1o1 value="BB"&gt;BB &lt;td&gt;&lt;input type=radio name=p1o1 value="K" &gt;K &lt;tr&gt;&lt;td&gt;&lt;input type=radio name=p1o1 value="RE"&gt;RE &lt;td&gt;&lt;input type=radio name=p1o1 value="DP"&gt;DP &lt;/table&gt; &lt;td valign=top align=center&gt; Run&lt;br&gt;&lt;input type=checkbox name=p1run1&gt;&lt;br&gt;&lt;hr&gt; RBIs&lt;br&gt;&lt;select name=p1rbi1&gt; &lt;option value=0&gt;0 &lt;option value=1&gt;1 &lt;option value=2&gt;2 &lt;option value=3&gt;3 &lt;option value=4&gt;4 &lt;/select&gt;&lt;p&gt; &lt;input type=radio name=p1o1 value="NA" checked&gt;N/A &lt;td&gt; &lt;/table&gt; &lt;td&gt; </code></pre> <p>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!</p> <p><strong>UPDATE</strong>: 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 <strong>eq</strong>(<em>x</em>).</p> <pre><code> $("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'); } }); </code></pre> <p><strong>UPDATE - GIVE ALL TABLES SPECIFIC CLASS</strong></p> <p>// set each table with the atBat class ABtables = $('input[type="checkbox"]').closest('table'); ABtables.each(function() { $(this).addClass('atBat'); });</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload