title: Jquery: Highlight/De-highlight table row on click
body: <p>I want my script to highlight the row that I select and it works great, but when a row is selected/highlighted i want it to be "deselected/dehighlighted" if another row is selected. How do i do this?</p>
  
  <p>Here is current code for selecting a row, it deselects, but only if i click on the same row again:</p>
  
  <pre><code>$(".candidateNameTD").click(function() {
              $(this).parents("tr").toggleClass("diffColor", this.clicked);
          });
  </code></pre>
  
  <p><strong>Html table</strong></p>
  
  <pre><code>&lt;table id="newCandidatesTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th style="cursor: pointer;"&gt;ID&lt;/th&gt;
              &lt;th style="cursor: pointer;"&gt;Navn&lt;/th&gt;
              &lt;th style="cursor: pointer;"&gt;Email&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;% foreach (var candidate in Model.Ansogninger)
      {
           %&gt;
              &lt;tr id="&lt;%= candidate.AnsogerID %&gt;" class="newCandidatesTableTr"&gt;
                  &lt;td&gt;&lt;div id="candidateID"&gt;&lt;%= candidate.AnsogerID %&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;div id="&lt;%= "candidateName_" + candidate.AnsogerID %&gt;" class="candidateNameTD"&gt;&lt;%= candidate.Navn %&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;div id="candidateEmail"&gt;&lt;%= candidate.Email %&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;div id="&lt;%= "acceptCandidateButton_" + candidate.AnsogerID %&gt;" class="acceptb" style="cursor: pointer; border: 1px solid black; width: 150px; text-align: center;"&gt;Godkend&lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
           &lt;%
      } %&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>