gettinmgをクリックしたときにのみテーブルヘッダにスタイルを適用し、他のテーブルヘッダをクリックしてスタイルを削除する方法は？

Question

私は7つの列を持つ1つのテーブルがあります。下に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

最初にどのクラスでもクラスを削除しようとすると、それはクラスを持つはずですクラス。

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

また、theadはあなたがthを選択した場合、それが唯一の境界線とそのセルとなり、全体の行に境界線を与えるだろう。

Answer 2

theadは、変更したい列ヘッダー（th）の親ですので、具体的にする必要があります。

"thead th"

あなたのJavaScriptが今彼の兄弟（他のヘッダ）からそれを削除、その後、列にクラスを追加する

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

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

}); 

、のようにする必要があり

jsFiddle DEMO

Answer 3

$(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 4

このような何か：

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