title: Change colour of table row onclick and change back onclick
body: <p>I'm looking for a way to change the background color of a TR onclick and then change it back onclick. Like select and deselect a row.</p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;No&lt;/th&gt;
        &lt;th&gt;Column1&lt;/th&gt;
        &lt;th&gt;Column2&lt;/th&gt;
        &lt;th&gt;Column3&lt;/th&gt;
        &lt;th&gt;Column4&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;First item&lt;/td&gt;
        &lt;td&gt;Good quality&lt;/td&gt;
        &lt;td&gt;Europe&lt;/td&gt;
        &lt;td&gt;Cheap&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I found about 20 scripts and all did pretty much the same thing: once the row changed background color once clicked, you couldn't make it go back with another click.</p>
  
  <p>My current CSS code for the table:</p>
  
  <pre><code>table {border-collapse: collapse; background: #041c32; }
  tr:nth-of-type(odd) {background: #041c32;}
  tr:nth-of-type(even) {background: #062949;}
  th {background: #1b558e; color: #041c32;}
  tr:hover {color:#ffc000; background-color:#000;}
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>