title: Highlight Row in a Table
body: <p>I have the following HTML/jQuery code and am trying to highlight a row in my table when a checkbox is clicked, but unfortunately I can't seem to get it going.</p>
  
  <p>See code below:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .highlight {
      background-color: yellow;
  }
  &lt;/style&gt;
  
  &lt;tr&gt;
    &lt;td class="t12datavalue" align="center" style=""&gt;&lt;input type="checkbox" value="123" name="f01"&gt;&lt;/td&gt;
    &lt;td class="t12datavalue" style=""&gt;123&lt;/td&gt;
    &lt;td class="t12datavalue" style=""&gt;333&lt;/td&gt;
    &lt;td class="t12datavalue" style=""&gt;Alex&lt;/td&gt;
    &lt;td class="t12datavalue" style=""&gt;Smith&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
    $(document).ready(function() {
      $('td input[type="checkbox"]').click(function() {
          if ($(this).is(':checked')){
               $(this).parent().parent().addClass('highlight');
          } else if($(this).parent().is('.highlight')) {
               $(this).parent().parent().removeClass('highlight');
          }
      }); 
    }); 
  &lt;/script&gt;
  </code></pre>