HTML Table Highlight Row на Hover, кроме первой строки (заголовок) -- html поле с участием hover поле с участием highlight пол Связанный проблема

HTML table highlight row on hover except first row (header)


35
vote

проблема

русский

все,

У меня есть GridView asp.net, который отображается на таблицу HTML.

 <код> <table>     <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>     <tr><td>Data 1</td><td>Data 2</td></tr>     <tr><td>Data 3</td><td>Data 4</td></tr> </table>   

Я хочу выделить ряд, когда мышь наплечивается над ним - за исключением первого ряда, которая является заголовочным.

Я просто промокнул голову с jQuery, и немного промаснул с CSS (CSS2 или CSS3). Есть ли предпочтительный способ сделать это?

Может ли кто-нибудь дать мне отправную точку для этого?

Приветствия

Андес

Английский оригинал

All,

I have an ASP.NET GridView that is rendered to an HTML table.

<table>     <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>     <tr><td>Data 1</td><td>Data 2</td></tr>     <tr><td>Data 3</td><td>Data 4</td></tr> </table> 

I want to highlight the row when the mouse is hovered over it - except for the first row which is the header.

I am just getting my head wet with JQuery, and have dabbled a bit with CSS (either CSS2 or CSS3). Is there a preferred way to do this?

Can anyone give me a starting point for this?

Cheers

Andez

</div
        

Список ответов

18
 
vote
vote
Лучший ответ
 

Вы можете сделать это, используя 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; }   
 

You can do this using the CSS :hover specifier. Here's a demonstration:

<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; } 
</div
 
 
         
         
77
 
vote

Есть способ достичь желаемого поведения без класса каждую строку отдельно. Вот как выделить каждую строку стола, кроме первого (заголовка) на навесе, используя CSS <код> :not и <код> :first-child селекторов:

 <код> tr:not(:first-child):hover {     background-color: red; }   

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

 <код> tr:hover {     background-color: red; } tr:first-child:hover {     background-color: white; }   

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

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

 

There is a way to achieve the desired behavior without class-ing each row separately. Here's how to highlight each table row except for first one (header) on hover using the CSS :not and :first-child selectors:

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

Unfortunately, IE < 9 does not support :not, so to do this in a cross-browser way, you can use something like this:

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

Basically, the first CSS rule includes all rows. To avoid highlighting the first row, you override the its hover style by selecting with tr:first-child and then keeping its background-color to white (or whatever the non-highlighted row's color is).

I hope that helped, too!

</div
 
 
         
         
45
 
vote

Для расширения ответа user2458978, конечно, наилучший способ сделать это, это правильно комировать таблицы.

 <код> <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> 0  

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

 <код> <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> 1  

Вот пример jsfiddle

 

To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.

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

Then the CSS is simply

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

Here's a jsFiddle example

</div
 
 
     
     
11
 
vote

<Код> <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> 2 Поместить заголовок tr Внутри THEAD TAG

<Код> <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> 3 Поместите другие TR Внутри тега Tbody

<Код> <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> 4 Используйте следующие CSS

 <код> <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> 5  
 

1. Place header tr inside thead tag

2. Place other tr inside tbody tag

3. Use following css

table tr:not(thead):hover {     background-color: #B0E2FF; } 
</div
 
 
 
 
3
 
vote

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

 <код> <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> 6  

}

Для всех прочее строки:

 <код> <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> 7  

или

 <код> <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> 8  
 

Use TH tag for first row and do that:

th { background-color:#fff; 

}

For all others rows:

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

or

tr:hover td {     background-color:#eee; } 
</div
 
 
2
 
vote

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

 <код> <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> 9  

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

 <код> .notfirst:hover {     background-color: red; } 0  
 

Use jQuery to add a class to the parent element of the td (wont select th)

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

Then add the CSS class

.highlight {    background:red; } 
</div
 
 
     
     
2
 
vote

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

 <код> .notfirst:hover {     background-color: red; } 1  

Это повлияет только на строки таблицы с TD внутри, а не настольные строки с Th's внутри. Работает во всех браузерах. Ура, ребята.

 

Why not simply use

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

This will only affect table rows with td's inside, not table rows with th's inside. Works in all browsers. Cheers, guys.

</div
 
 
 
 
0
 
vote

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

 <код> .notfirst:hover {     background-color: red; } 2  
 

Why not something like:

tr:first-child ~ tr { background-color:#fff; } 
</div
 
 
0
 
vote

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

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

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

Мой ответ:

 <код> .notfirst:hover {     background-color: red; } 3  
 

As of my requirement, I have to highlight all the even rows except header row.

Hence, this answer might not be suitable to the above question.

Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.

My answer is:

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

Связанный проблема

0  транзакция внутри контура  ( Transaction inside a for loop ) 
Я хочу запустить транзакцию внутри контура. Мой код: - <код> n==00 Но проблема в том, что после оповещения (перед транзакцией) я напрямую получаю предупр...

0  Запустить функцию JavaScript с использованием C #  ( Trigger javascript function using c sharp ) 
Я должен написать класс C #, который получает содержимое HTML-страницы (страница публичная) и запускает функцию JavaScript, которая загружает файл. Моя цель...

13  Как центрировать текст внутри якоря  ( How to center text inside anchor tag ) 
Я хочу, чтобы мой якорный тег выглядеть как кнопка, и создала этот стиль jsfiddle <код> watch0 Похоже, как я хочу, но как в центре текста горизонтально...

0  SVG D3 круговой контроль  ( Svg d3 circular control ) 
Я пытаюсь сделать контроль, в котором радиальные линии прилипают за пределами круга. Длина каждой линии, прилипающей зависит от значения данных. Короче говоря...

1  Textarea Overflow-X Когда в нее копирование пользователей?  ( Textarea overflow x when a user copy pastes into it ) 
У меня есть текстовая пара с Overflow-X: AUTO; отнесено к этому. Он отлично работает, когда пользователь набирает текст в коробку вручную. Однако, когда польз...

1  Правильное форматирование ссылки HTML - можно ли два равна внутри одного тега <a>? [Дубликат]  ( Proper html link formatting can two divs be inside of one a tag ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  Возможное решение этой проблемы проектирования?  ( The possible solution to this design issue ) 
Мне нужно знать, как исправить эту проблему в конструкциях форм .. Получение этого в Firefox И это в IE ... Цвет не является проблемой .. Juz Нужно вы...

3  Рисование круга с помощью кинетических js  ( Drawing a circle using kinetic js ) 
Я пытаюсь построить очень базовую покраску, используя каркас kinetic JS. Все все идут хорошо, пока не попытался включить функцию формы, которая позволяет поль...

1  Как я могу скрыть десятичные числа правильным образом?  ( How do i hide decimal numbers the correct way ) 
Я использую этот метод, чтобы скрыть десятичные числа на странице. код CSS: <код> span { clip-path: inset(0 2.1ch 0 0); } HTML-код: <код> <span>...

0  Как я могу связать изображения Data-SRC на внутреннюю страницу?  ( How can i link data src images to internal page ) 
Это то, что у меня есть на http://www.hairattheritz.com/untitled.html Мне нравится, как он изменил размер для различных размеров экрана, однако я не могу най...

23  Вопрос с медиа-запросами CSS (Scrollbar)  ( Issue with css media queriesscrollbar ) 
У меня проблемы с CSS Media Query в Firefox. Он работает правильно в Chrome, как я сделал два рав и хотеть прокрутку. Если я уменьшаю размер экрана Firefox до...

0  Имея проблемы с использованием объема в jQuery  ( Having issues using a scope in jquery ) 
Так что я пытаюсь передать значение переменной FreeMarker ($ {item.uid}) на клик ссылки, чтобы запустить модаль с тем же уникальным значением идентификатора. ...

1  HTML / CSS - Center Nav Bar переменных размеров  ( Html css center nav bar of variable size ) 
У меня будет навигационный бар, который позволяет пользователю сортировать галерею картинок. Проблема в том, что ширина панели NAV будет варьироваться в завис...

0  Делайте DIV и его содержание только отзывчиво в ширину?  ( Make div and its content only responsive in width ) 
Прежде всего я немного запутался, но я сделаю все возможное, чтобы объяснить мою проблему и то, что я хочу. У меня есть div, и внутри этого div у меня есть ...

3  Применять курсивый стиль на символ трубы  ( Apply italic style to a pipe symbol ) 
Я пытаюсь сделать символ трубы <код> italic Но он не работает там, где другие шрифты отображаются как курсив, я делаю ничего плохого (в Chrome)? <код> <em>...