Javascript 如何仅在单击表头时对其应用样式，并在单击任何其他表头时删除样式？

我有一个表有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>

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

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

---

它很好用。但当我点击其他一些表格标题时，之前点击的表格标题的边框并没有被移除。有什么建议吗？

AD

是要修改的列标题（

th

）的父项，因此需要具体说明

“

thead th

”

您的JavaScript现在应该是

$(document).on('click', 'thead th', function () { 

   $(this).addClass('sort-border').siblings().removeClass('sort-border');

});

将类添加到列中，然后将其从其同级（其他标题）中删除

---

AD

是要修改的列标题（

th

）的父项，因此需要对其进行详细说明

“

thead th

”

您的JavaScript现在应该是

$(document).on('click', 'thead th', function () { 

   $(this).addClass('sort-border').siblings().removeClass('sort-border');

});

将类添加到列中，然后将其从其同级（其他标题）中删除

---

如果您首先尝试删除任何标题上的类，而该标题应具有该类，则只有一个标题具有

排序边框

类

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

---

另外，

thead

将为整行提供边框，如果选择

th

，则只有该单元格具有边框。

如果您首先尝试删除任何标题上的类，该标题应具有该类，则只有一个标题具有

排序边框

类

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

另外，

thead

将为整行提供边框，如果您选择

th

，则只有该单元格有边框。

$（文档）。在（'click'，'thead'，函数（）{
$（'thead'）.removeClass（'sort-border'）；
$（this.addClass（'sort-border'）；
});
。对边框进行排序{
背景：#ccc；
}

员工姓名
帐号
帐户名
别名
到期日
应付总额
付款金额
员工姓名
帐号
帐户名
别名
到期日
应付总额
付款金额

$（文档）。在（'click'，'thead'，函数（）{
$（'thead'）.removeClass（'sort-border'）；
$（this.addClass（'sort-border'）；
});
。对边框进行排序{
背景：#ccc；
}

员工姓名
帐号
帐户名
别名
到期日
应付总额
付款金额
员工姓名
帐号
帐户名
别名
到期日
应付总额
付款金额
执行以下操作：

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

这样做：

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

哦，是的。。不知道为什么我没有想到。成功了。谢谢：）哦，是的。。不知道为什么我没有想到。成功了。谢谢：）