gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 21:19:51 24 4
gpt4 key购买 nike

我有一个包含 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;
}

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

最佳答案

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

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

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

关于javascript - 如何仅在单击表头时在表头上应用样式并在单击任何其他表头时删除样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38474622/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com