JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<table>
<tbody>
<tr>
<th class="sorting-asc">A</th>
<th class="sorting-desc">D</th>
<th>A</th>
</tr>
<tr>
<td>A</th>
<td>D</th>
<td>A</th>
</tr>
<tr>
<td>A</th>
<td>D</th>
<td>A</th>
</tr>
</tbody>
</table>

CSS

.highlight  {
    background-color: red;
}

JavaScript

$("*").click(function(){
    var thl=document.getElementsByTagName('th');
    var trl=document.getElementsByTagName('tr');
    var classname;
    for(var i=0;i<thl.length;i++)
    {
        var th=thl[i];
        if (th.className == 'sorting-desc') {
              classname = 'highlight';
        } else if (th.className == 'sorting-asc') {
              classname = 'highlight';  
        } else {
              classname = '';
        }
      for(var j=1;j<trl.length;j++)
        {
            var tr=trl[j];
            var td=tr.cells[i];
            if (td) {
                td.className=classname;
            }
        }
    }
});