JSFiddle - React, Tailwind, and code Playground
HTML
Sort this:
<table id="this">
<tr>
<td>Foo</td>
<td>Foo</td>
<td class="belowtop italic" style="font-weight:bold; background-color:#dee">Foo</td>
</tr>
<tr>
<td>Foo</td>
<td>Foo</td>
<td class="bottom" style="background-color:#ffa">Foo</td>
</tr>
<tr>
<td>Foo</td>
<td>Foo</td>
<td class="bottom" style="background-color:#ffa">Foo</td>
</tr>
<tr>
<td>put me on top</td>
<td>Foo</td>
<td class="ontop" style="background-color:#eee">Foo</td>
</tr>
</table>
<br>like this (or any other manually defined order):
<table>
<tr>
<td>put me on top</td>
<td>Foo</td>
<td class="ontop" style="background-color:#eee">Foo</td>
</tr>
<tr>
<td>Foo</td>
<td>Foo</td>
<td class="belowtop italic" style="font-weight:bold; background-color:#dee">Foo</td>
</tr>
<tr>
<td>Foo</td>
<td>Foo</td>
<td class="bottom" style="background-color:#ffa">Foo</td>
</tr>
<tr>
<td>Foo</td>
<td>Foo</td>
<td class="bottom" style="background-color:#ffa">Foo</td>
</tr>
</table>
CSS
td {
border:1px solid #aaa;
padding:10px
}
.italic {
font-style:italic
}
JavaScript
/* sort table rows by bg-color of last row cell: #eee, #dee, #ffa
* or by css class: .ontop, .belowtop, .bottom
* no idea where to start. i can alert the colors as RGB at least :/
*/
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function rgb(r, g, b){
return rgbToHex(r, g, b);
}
function sortRGB( a, b){
return eval( $(a).find('td').last().css("background-color")) > eval( $(b).find('td').last().css("background-color"))
}
var $table=$('#this'), $tr=$table.find(' tr').detach();
$table.html( $tr.sort( sortRGB))