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

如果您首先尝试删除任何标题上的类，那么该类应该包含sort-border类。

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

此外，thead会为整行提供边框，如果您选择th，则只会是带边框的单元格。

Answer 2

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

.sort-border {
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
<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>

Answer 3

做这样的事情：

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

Answer 4

thead是您要修改的列标题（th）的父级，因此您需要对其进行具体说明。

“thead th”

您的JavaScript现在应该是，

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

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

});

将类添加到列中，然后将其从兄弟姐妹中删除（其他标题）

jsFiddle DEMO

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

4 个答案: