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

Question

点击列排序改变列的颜色或高亮列行(基于用户的onclick事件)

我有一个带有 tablesorter 的表，它对列进行 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 并按此处所示进行处理，Working Demo

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