Как выделить определенные строки таблицы с помощью jQuery?

Question

Мои CodePen: http://codepen.io/leongaban/pen/nJzcv

Так что я нашел this great example из строки таблицы подсветки на CSS-Tricks. (Demo)

Однако я не хочу, чтобы выделить мою top row, я попытался предназначаться только определенный ТД с именем класса, но все еще не близко :(

Как бы вы об этом?

//Row Highlighting 
$("table .active").delegate('td','mouseover mouseout', function(e) { 
     if (e.type == 'mouseover') { 
      console.log('hovering over row'); 
      $(this).parent().addClass("gray-rollover"); 
     } 
     else { 
      $(this).parent().removeClass("gray-rollover"); 
     } 
    }); 

// Works but highlights all Rows 
/*$("table").delegate('td','mouseover mouseout', function(e) { 
     if (e.type == 'mouseover') { 
      console.log('hovering over row'); 
      $(this).parent().addClass("gray-rollover"); 
     } 
     else { 
      $(this).parent().removeClass("gray-rollover"); 
     } 
    });*/ 

Answer 1

Вы можете добавить table head вокруг первой строки и тела таблицы вокруг отдыха:

<table cellpadding="12" cellspacing="1" border="1"> 
    <thead><tr> 
    <th>Icon</th> 
    <th class="data-td data-name">Name</th> 
    <th class="data-td data-career">Career</th> 
    <th class="data-td data-company">Company</th> 
    </tr></thead> 
    <tbody><tr> 
    <!-- more stuff --> 
    </tr></tbody> 
</table> 

Тогда вы можете просто нацелит тело таблицы с JavaScript:

$("table > tbody .active").on('mouseover mouseout','td', function(e) { 

Хотя это возможно для этого просто JS и без изменения HTML, в этом случае я предпочитаю изменение HTML, потому что оно семантически корректно - ваша первая строка не является содержимой, поэтому должен быть отмечен отдельно как заголовок в любом случае.

Answer 2

Один из способов будет использовать not() селектор:

$(this).parent().not('tr:first-child').addClass("gray-rollover"); 

Это добавит класс во все строки, кроме первого при наведении курсора мыши.

CodePen here.

Answer 3

Почему бы не просто использовать CSS:

tr:nth-child(even) td { 
    background: #333; 
    color: #fff; 
} 

Так что вы хотите стили на мышь-над, за исключением первой строки. Затем:

tr:hover td { 
    background: #333; 
    color: #fff; 
} 

tr:first-child:hover td{ 
    background: none; 
    color: #333 
} 

Или я что-то упустил?