title: Sort table based on cell background color by clicking table header
body: <p>I have a table where cell can be with:</p>
  
  <ol>
  <li>No background color</li>
  <li>rgb(255, 0, 0)</li>
  <li>rgb(255, 165, 0)</li>
  <li>rgb(0, 128, 0)</li>
  </ol>
  
  <p>Here is a small piece of the table I am talking about:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  
  &lt;table class="w3-table-all"&gt;
  
  &lt;tr&gt;&lt;th class="w3-center" style="width: 16.7%;"&gt;Name&lt;/th&gt;&lt;th class="w3-center" style="width: 16.7%;"&gt;Run-1&lt;/th&gt;&lt;th class="w3-center" style="width: 16.7%;"&gt;Run-2&lt;/th&gt;&lt;th class="w3-center" style="width: 16.7%;"&gt;Run-3&lt;/th&gt;&lt;th class="w3-center" style="width: 16.7%;"&gt;Run-4&lt;/th&gt;&lt;th class="w3-center" style="width: 16.7%;"&gt;Run-5&lt;/th&gt;&lt;/tr&gt;
  
  &lt;tr&gt;&lt;th&gt;test1&lt;/th&gt;&lt;td&gt;9130.47&lt;/td&gt;&lt;td&gt;392478.721&lt;/td&gt;&lt;td class="w3-center"&gt;-&lt;/td&gt;&lt;td&gt;44301.148&lt;/td&gt;&lt;td&gt;44301.148&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr&gt;&lt;th&gt;test2&lt;/th&gt;&lt;td&gt;747505.0087&lt;/td&gt;&lt;td style="background: rgb(0, 128, 0);"&gt;368460.1843&lt;/td&gt;&lt;td style="background: rgb(0, 128, 0);"&gt;64204.7407&lt;/td&gt;&lt;td style="background: rgb(0, 128, 0);"&gt;106400.8238&lt;/td&gt;&lt;td style="background: rgb(0, 128, 0);"&gt;106400.8238&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr&gt;&lt;th&gt;test3&lt;/th&gt;&lt;td&gt;65.01%&lt;/td&gt;&lt;td style="background: rgb(255, 0, 0);"&gt;68.25%&lt;/td&gt;&lt;td style="background: rgb(255, 0, 0);"&gt;69.17%&lt;/td&gt;&lt;td style="background: rgb(255, 0, 0);"&gt;65.07%&lt;/td&gt;&lt;td style="background: rgb(0, 128, 0);"&gt;65.07%&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr&gt;&lt;th&gt;test4&lt;/th&gt;&lt;td&gt;67.53%&lt;/td&gt;&lt;td&gt;82.72%&lt;/td&gt;&lt;td&gt;69.67%&lt;/td&gt;&lt;td&gt;74.29%&lt;/td&gt;&lt;td&gt;74.29%&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr&gt;&lt;th&gt;test5&lt;/th&gt;&lt;td&gt;-1906.877&lt;/td&gt;&lt;td style="background: rgb(0, 128, 0);"&gt;-103.597&lt;/td&gt;&lt;td style="background: rgb(0, 128, 0);"&gt;-87.119&lt;/td&gt;&lt;td style="background: rgb(0, 128, 0);"&gt;-132.043&lt;/td&gt;&lt;td style="background: rgb(0, 128, 0);"&gt;-132.043&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr&gt;&lt;th&gt;test6&lt;/th&gt;&lt;td&gt;64.86%&lt;/td&gt;&lt;td style="background: rgb(255, 0, 0);"&gt;68.09%&lt;/td&gt;&lt;td style="background: rgb(255, 0, 0);"&gt;72.67%&lt;/td&gt;&lt;td style="background: rgb(255, 165, 0);"&gt;65.56%&lt;/td&gt;&lt;td style="background: rgb(255, 165, 0);"&gt;65.56%&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to sort the table by clicking any of the headers, and it will sort it based on the cells' color in that particular column. For example, when you click "Run-4", I want to sort the table in the following manner:</p>
  
  <ol>
  <li>Red cells first</li>
  <li>Orange</li>
  <li>Green</li>
  <li>No color</li>
  </ol>
  
  <p>When I click "Run-4" again, it does the reverse:</p>
  
  <ol>
  <li>No color first</li>
  <li>Green</li>
  <li>Orange</li>
  <li>Red</li>
  </ol>
  
  <p>I tried referencing several SO questions but had no success in implementing them:</p>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/38305641/sort-table-rows-based-on-background-color-using-jquery?answertab=votes#tab-top">Sort table rows based on background-color using jquery
  </a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/21887475/filter-html-table-by-color">Filter HTML table by color [closed]</a></p></li>
  <li><a href="https://stackoverflow.com/questions/10683712/html-table-sort">HTML table sort</a> - plugins suggested here do not seem to do what I need.</li>
  </ul>