すべての行にCSSクラスを適用しますが、テーブル見出しには適用しません

Question

HTMLテーブルのクリックされた行の色を変更するCSSスタイルを適用しようとしています。 clickイベントでは、クラス（selected-row）を追加しています。今、私のテーブルには、各列の見出しをクリックするとソート機能があります。見出しは私のものではない色になります。私は行だけを必要としますが、見出しは必要ありません。だから、私は自分のスタイルを（最初の子供ではなく）変更しました。今、見出しと最初の行は色を変更しません。私は選択された行のクラスを追加するときに色を変更する色や他のすべての行を変更しないだけの見出しが必要です。

.selected-row:not(:first-child) { 
    background-color: brown; 
    color: #FFF; 
} 

      $("#example tr").click(function() { 
       $(this).addClass('selected-row').siblings().removeClass('selected-row'); 


      }); 

Answer 1

あなたは、ヘッダー行を含むように<thead>を使用して、テーブルをマークアップし、データ行を含むように<tbody>場合は、特にテーブル本体に行のみをターゲットにすることができ - CSSでこのよう：

$('#example tbody > tr')... 

表のマークアップ：

とjQueryでこのよう

<table> 
    <caption>This table contains...</caption> 
    <thead> 
     <tr> 
      <th>Heading</th> 
      <th>Heading</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <td>Total</td> 
      <td>$50</td> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td>Item 1</td> 
      <td>$20</td> 
     </tr> 
     <tr> 
      <td>Item 2</td> 
      <td>$30</td> 
     </tr> 
    </tbody> 
</table> 

Answer 2

一つの方法として、潜在的には、ヘッダー行要素のために使用thを<tbody></tbody>に<thead></thead>と体であなたのテーブルヘッダをラップして、

$("#example tbody tr").click(function() {...}); 

Answer 3

としてどんなセレクターを適用することになりません。あなたがあなたのテーブルに「目」タグを使用している場合

$("#example tr td").click(function() { 
       $(this).parent().addClass('selectedrow').siblings().removeClass('selected-row'); 

：あなたは「TD」タグをターゲットにすることができ

Answer 4

<table style="width:100%"> 
     <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     <th>Age</th> 
     </tr> 
     <tr> 
     <td>Jill</td> 
     <td>Smith</td> 
     <td>50</td> 
     </tr> 
    </table> 

Answer 5

あなたは使用してヘッダーを変更したくない場合thまたはtbodyタグを使用すると、次のようなことができます。

$("table tr:gt(0)").click(function(){ 
    $(this).siblings().removeClass('selected-row'); 
    $(this).addClass('selected-row'); 
}) 

あなたは[誰かが私の質問に答えるとき、私は何をすべき？]読みください（https://stackoverflow.com/help/someone-answers）このjsfiddle