javascript - 如何仅在单击表头时在表头上应用样式并在单击任何其他表头时删除样式？

Question

我有一个包含 7 列的表格。以下是 HTML 代码:

<table id="multiple-account-table" cellpadding="0" cellspacing="0">
    <thead>
        <tr class="border-class">
            <th>Employee Name</th>
            <th>Account Number</th>
            <th>Account Name</th>
            <th>Alias</th>
            <th>Due Date</th>
            <th>Total Due</th>
            <th>Payment Amount</th>
        </tr>
    </thead> 
</table>

现在我的要求是，当我单击表格标题时，该特定边框的底部应该有粗边框。当用户单击其他表头时，该边框应从先前的表头中删除并应用于当前单击的表头。类似于下图:

Click here to see image

我写了这段 jQuery 代码:

$(document).on('click', 'thead', function () {
    $(this).addClass('sort-border');
});

下面是我的排序边框的 CSS 类:

.sort-border {
    border-bottom: 4px solid black;
}

它工作正常。但是，当我单击其他一些表头时，之前单击的表头的边框不会删除。有什么建议吗？

Answer 1

如果您首先尝试删除任何 header 上的类，那应该有该类，您将只有一个带有 sort-border 类的 header 。

$(document).on('click', 'th', function () {
    $('th.sort-border').removeClass('sort-border');
    $(this).addClass('sort-border');
});

另外，thead 会给整行加边框，如果你选择 th，它只会是那个有边框的单元格。