web-dev-qa-db-fra.com

Table HTML surlignée en survol avec la première ligne (en-tête)

Tout,

J'ai un ASP.NET GridView qui est rendu à un tableau 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>

Je souhaite mettre en surbrillance la ligne lorsque la souris est survolée - à l'exception de la première ligne qui est l'en-tête.

Je commence tout juste à me mouiller la tête avec JQuery et à essayer un peu de CSS (CSS2 ou CSS3). Y a-t-il un moyen préféré de faire cela?

Quelqu'un peut-il me donner un point de départ pour cela?

À votre santé

Andez

htmlhoverhighlight
29
Andez

Vous pouvez le faire en utilisant le spécificateur CSS :hover. Voici une démonstration:

<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;
}
15
Chris

Il existe un moyen d'obtenir le comportement souhaité sans classer chaque ligne séparément. Voici comment mettre en évidence chaque ligne du tableau à l'exception de la première (en-tête) en survol à l'aide des sélecteurs CSS :not et :first-child:

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

Malheureusement, IE <9 ne prend pas en charge :not. Pour ce faire, vous pouvez utiliser quelque chose comme ceci:

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

Fondamentalement, la première règle CSS inclut toutes les lignes . Pour éviter de mettre en surbrillance la première ligne, vous remplacez son style de survol en sélectionnant tr:first-child, puis en conservant son background-color en blanc (ou la couleur de la ligne non surlignée).

J'espère que ça a aidé aussi!

63
Chris

Pour développer la réponse de user2458978, le meilleur moyen de le faire est certainement de coder correctement les tables.

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

Ensuite, le CSS est simplement

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

Voici un exemple jsFiddle

29
Morvael

1. Placer l'en-tête tr à l'intérieur de la balise thead

2. Placez les autres balises dans la balise tbody

3. Utilisez les css suivants 

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

Utilisez jQuery pour ajouter une classe à l’élément parent du td (sans sélectionner th)

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

Ajoutez ensuite la classe CSS

.highlight {
   background:red;
}
1
Oliver Millington

Pourquoi ne pas simplement utiliser

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

Cela n'affectera que les lignes de la table avec td à l'intérieur, pas les lignes de la table avec td. Fonctionne dans tous les navigateurs. Acclamations gars.

1
Lars Tuff

Pourquoi pas quelque chose comme:

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

Utilisez la balise TH pour la première ligne et procédez comme suit:

th {
background-color:#fff;

}

Pour toutes les autres lignes:

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

ou

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

En tant que de besoin, je dois mettre en évidence toutes les lignes paires sauf la ligne d'en-tête.

Par conséquent, cette réponse pourrait ne pas convenir à la question ci-dessus.

Même alors, je donne ma réponse ici avec l'espoir que quelqu'un d'autre puisse utiliser ma réponse s'il rencontre cette page dans la recherche sur les moteurs de recherche.

Ma réponse est:

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