title: Highlight/Unhighlight ONE row in a column
body: <p>I have a pretty basic table at the moment: </p>
  
  <p><img src="https://i.stack.imgur.com/SS58c.png" alt="enter image description here"></p>
  
  <p>I need to be able to only hightlight one row in each column, and deselect whatever was selected before it..</p>
  
  <p>I understand I'm going to need a CSS class, e.g. </p>
  
  <pre><code> .hightlighted {
   background: #f00;
   color: #fff;
   }  
  </code></pre>
  
  <p>The HTML in the view is pretty basic also:</p>
  
  <pre><code>&lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Differdange&lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;       
      &lt;tr&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Dippach&lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
      &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Dudelange&lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Echternach&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Erpelscheid&lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Esch-sur-Alzette&lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Esch-sur-Sûre&lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
      &lt;tr&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Ettelbruck&lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
      &lt;tr&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Feulen&lt;/td&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody
  </code></pre>
  
  <p>But I don't know whether it's appropriate to highlight/unhighlight rows in CSS if I am going to be needing to 'grab' the selected data from the rows when the table is completed by the user?</p>
  
  <p>Can anyone suggest what I should use (JQuery, Javascript, CSS) to highlight a row in a column so that I can get the data later?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Now I've got the highlighting sorted, the only problem I'm having is differentiating between columns so that instead of this (which I'm getting atm)</p>
  
  <p><img src="https://i.stack.imgur.com/MKcaH.png" alt="enter image description here"> </p>
  
  <p>I want each columns to be able to have it's own unique row highlighted (e.g. Differdange could be highlighted, as well as dddd on Localities)</p>
  
  <p>Any way to edit the </p>
  
  <pre><code>$("tr").click(function() {
  $("tr").removeClass("highlighted");
  $(this).addClass("highlighted");
  });
  </code></pre>
  
  <p>code to do this? Thanks</p>