Подсветка строки таблицы HTML при наведении, кроме первой строки (заголовок)

Это можно сделать с помощью спецификатора CSS :hover. Вот демонстрация:

<table>
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
    <tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
    <tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>

CSS:

.notfirst:hover {
    background-color: red;
}

Существует способ добиться желаемого поведения, не классифицируя каждую строку отдельно. Вот как выделить каждую строку таблицы, кроме первой (заголовок) при наведении, используя селекторы CSS :not и :first-child:

tr:not(:first-child):hover {
    background-color: red;
}

К сожалению, IE ‹ 9 не поддерживает :not, поэтому чтобы сделать это кроссбраузерным способом, можно использовать что-то вроде этого:

tr:hover {
    background-color: red;
}
tr:first-child:hover {
    background-color: white;
}

По сути, первое правило CSS включает все строки. Чтобы избежать выделения первой строки, вы переопределяете ее стиль наведения, выбирая с помощью tr:first-child, а затем сохраняя его background-color белым (или любым другим цветом невыделенной строки).

Надеюсь, это тоже помогло!

Чтобы расширить ответ пользователя 2458978, безусловно, лучший способ сделать это - правильно закодировать таблицы.

<table>
<thead>
    <tr><th></th></tr>
</thead>
<tbody>
    <tr><td></td></tr>
    <tr><td></td></tr>
</tbody>
</table>

Тогда CSS просто

table tbody tr:hover { background-color: red; }

Вот пример jsFiddle

1. Поместите заголовок tr внутри тега ad

2. Поместите другой tr внутри тега tbody

3. Используйте следующий css

table tr:not(thead):hover {
    background-color: #B0E2FF;
}

Используйте тег TH для первой строки и сделайте это:

th {
background-color:#fff;

}

Для всех остальных строк:

    tr:not(:first-child):hover {
    background-color:#eee;
}

or

tr:hover td {
    background-color:#eee;
}

Используйте jQuery, чтобы добавить класс к родительскому элементу td (не выберете th)

$('td').hover(function(){
   $(this).parent().addClass('highlight');
}, function() {
   $(this).parent().removeClass('highlight');
});

Затем добавьте класс CSS

.highlight {
   background:red;
}

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

tr>td:hover {
/* hover effect */
background-color: lightblue;
}

Это повлияет только на строки таблицы с td внутри, а не на строки таблицы с th внутри. Работает во всех браузерах. Здоровья, ребята.

Почему бы не что-то вроде:

tr:first-child ~ tr { background-color:#fff; }

По моему требованию я должен выделить все четные строки, кроме строки заголовка.

Следовательно, этот ответ может не подходить для поставленного выше вопроса.

Даже тогда я даю свой ответ здесь в надежде, что кто-то еще сможет использовать мой ответ, если он встретит эту страницу в поисковой системе.

Мой ответ:

$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");