JQuery mettre en évidence chaque deuxième ligne du tableau - JQuery, ligne, mettre en évidence

Salut les gars, je viens de commencer avec jQuery, je me demande comment résoudre ce problème:

J'essaie de mettre en surbrillance chaque ligne du tableau en cliquant sur la case à cocher, tout va bien sauf que seule une ligne sur deux est en surbrillance.

    $("tr").on("click",":checkbox", function () {
if($(this).is(":checked")) {
$(this).closest("tr").addClass("highlighted");
} else {
$(this).closest("tr").removeClass("highlighted");
}

J'ai trouvé ce lien css attaché provoque ce problème. Malheureusement, je ne peux pas l'ignorer. J'ai aussi essayé toggleClass mais sans succès.

Comment puis-je mettre en surbrillance chaque ligne cochée dans un tableau en utilisant le fichier css mentionné ci-dessus?

Réponses:

Il semble que l'api pur ait une règle de priorité plus élevée .pure-table-striped tr:nth-child(2n-1) td{} qui définit la couleur d’arrière-plan, votre règle est remplacée par cette règle. La solution consiste à ajuster votre règle comme

.highlighted, .pure-table-striped tr.highlighted td {
background-color: rgba(0, 255, 0, 0.7);
}

Démo: Violon

Pouvez-vous publier toutes les règles de votre feuille de style css pouvant affecter le rendu des lignes sur votre page?

Si vous avez du code qui donne un even / odd classe à chaque ligne, une façon d'avoir le highlighted règle s'applique avec une priorité plus élevée que la even / odd règle est de le spécifier deux fois, par ex. :

//replace
tr.highlighted { background-color: purple }

//with
tr.even.highlighted, tr.odd.highlighted { background-color: purple }