单击列排序会更改我们单击的列行的颜色 - javascript

Question

单击列排序会更改列的颜色或突出显示列行（基于用户的onclick事件）

我有一个tableorter表，它对列asc和desc进行排序。（下面的代码）。 每一列 - 如果我点击 - 它将排序.. 例如..如果我单击Study ID，它会对行进行排序..我希望在排序时更改颜色，以便根据我排序的列来了解。

<table border="0" cellpadding="0" cellspacing="0" class="tablesorter">
<thead>
    <tr>
        <th>Study ID</th>
        <th>Study Title & Description</th>
        <th>Route</th>
        <th>Indication1</th>
        <th>Therapeutic Area</th>
        <th>Molecule</th>
    </tr>
</thead>

我尝试使用此脚本进行排序 - 突出显示我们排序的列行：

http://www.allmyscripts.com/Table_Sort/ - 没有成功。

我在grails 2.1.1 javascript中使用它

我试过了：

<script>
$( "#th1" ).click(function() {
    alert("dsdsf");
    $("th").css({"font-color": "yellow", "font-size": "20%"});
});
</script>
<thead>

    <tr>
        <th id="th1">Study ID</th>
        <th>Study Title & Description</th>
        <th>Route</th>
        <th>Indication1</th>
        <th>Therapeutic Area</th>
        <th>Molecule</th>
    </tr>
</thead>

Answer 1

抓住td和进程，如下所示Full code behind demo.

$("td").click(function () {
    var columnNo = $(this).index();
    $(this).closest("table")
        .find("tr td:nth-child(" + (columnNo + 1) + ")")
        .css("background-color", "red");
});

Answer 2

以下是纯CSS解决方案，您只需要在列中添加sorted类。

https://jsfiddle.net/s6b3kms1/

它基于this。