Jquery: Highlight/De-highlight table row on click
<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>
