將CSS類應用於所有行而不是表標題

我想應用css樣式來更改HTML表的單擊行的顏色。在點擊事件中，我添加了類（selected-row）。現在，當點擊每列的標題時，我的表格具有排序功能。標題變成了彩色，這不是我想要的。我只需要行但不需要標題。所以，我改變了我的風格（不是第一個孩子）。現在，標題AND第一行不會改變顏色。我只需要標題不要改變顏色，當我添加選定行類時，所有其他行都會改變顏色。將CSS類應用於所有行而不是表標題

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

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


      });

來源

2017-10-12 Super Man

這方面的工作，請閱讀[當有人回答我的問題，我應該怎麼辦？（https://stackoverflow.com/help/someone-answers）。即使您獲得了有用的答案，但您從未接受過任何問題的答案，這是不正確的答案。你應該接受你的問題的答案，這樣他們就可以在網站上關閉了，並且可以回答答題員和你自己的問題。不接受答案的歷史可能會讓人們在一段時間後不再煩惱你的問題。 – FluffyKitten

如果你標記你的表有<thead>包含標題行，並<tbody>包含數據行，您可以特意在表格體目標只行 - 像這樣的CSS：

tbody > tr { }

而且像這樣的jQuery：

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

表加價：

<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>

來源

2017-10-12 18:11:07 Fenton

一種方法可能做到這將是你的包裹表頭中<thead></thead>和身體<tbody></tbody>，然後選擇任何申請成爲

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

來源

2017-10-12 18:11:08 Nick

使用th標題行元素。

來源

2017-10-12 18:11:53 Nayish

您可以針對「TD」標籤：如果您在使用表「TH」標籤

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

：

<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>

來源

2017-10-12 18:18:50 tomsmithweb

如果你不想使用修改你的頭th或tbody標籤，你可以做這樣的事情。

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

你可以看到在這個jsfiddle

來源

2017-10-12 18:22:43 Garrett

將CSS類應用於所有行而不是表標題

回答

相關問題