Changer le CSS de Ligne de la Table OnClick
Je suis en train de changer l'arrière-plan et la couleur du texte d'une ligne de tableau sur cliquez à l'aide de jQuery et CSS de sorte qu'une seule ligne peut être sélectionnée à la fois. Cependant, je n'arrive pas à obtenir le CSS pour changer, même si la classe est en train de changer correctement à partir de la fonction jQuery, de sorte que le jQuery semble fonctionner.
Je suis très confus pourquoi le CSS ne change pas lorsque la classe est modifiée (ce que je peux voir qui se passe sur l'inspecter l'élément vue sur chrome).
Noter que les lignes de la table sont générés à l'intérieur d'un Django modèle de page et la div classes sont de Bootstrap.
<div class="row panel panel-default">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Pass #</th>
<th>First Name</th>
<th>Last Name</th>
<th>Type</th>
<th>Active</th>
</tr>
</thead>
<tbody class="member">
{% for member in filter_list %}
{% with member.pass_set.all|first as pass %}
<tr>
<td>{{member.id}}</td>
<td>{{pass.active_id}}</td>
<td>{{member.last_name}}</td>
<td>{{member.first_name}}</td>
<td>{{pass.member_type}}</td>
<td>{{pass.season.is_current|yesno|capfirst}}</td>
</tr>
{% endwith %}
{% endfor %}
</tbody>
</table>
</div>
$("tr").click(function() {
$(this).parent().children().removeClass(".selected");
$(this).addClass(".selected");
});
.member tr:hover {
background-color: rgba(41, 103, 182, 0.89);
color: #FFF;
}
.selected tr{
background-color: rgba(41, 103, 182, 0.89);
color: #FFF;
}
Je pensais vraiment que ce serait simple, mais j'ai été coincé pendant un certain temps. Merci d'avance pour toute aide!
Merci à tous pour les réponses rapides. J'ai fini par prendre conseil auprès de tous les trois!
Solution finale:
.member tr.selected {
background-color: rgba(41, 103, 182, 0.89);
color: #FFF;
}
$("tbody tr").click(function() {
$(this).addClass('selected').siblings().removeClass("selected");
});
Vous devez vous connecter pour publier un commentaire.
Vous ajoutez le
selected
classe à latr
élément, de sorte que votre sélecteur CSS est incorrect. Vous pouvez aussi le rendre plus précis en préfixant avec.member
trop. Essayez ceci:Aussi, vous souhaitez peut-être modifier votre jQuery afin que seuls les
tr
éléments au sein de latbody
peut être sélectionné - je doute que vous voulez les gens à sélectionner la ligne d'en-tête:Noter qu'il n'y a pas de
.
préfixe nécessaire pour laaddClass()
ouremoveClass()
méthodes.Exemple de violon
Vous n'avez pas besoin de la
.
dans leaddClass
ouremoveClass
méthodes. De même, vous n'avez pas besoin de latr
dans votre CSS pour la.selected
classe puisque vous l'ajoutez à untr
élément...http://jsfiddle.net/2E9T5/
http://jsfiddle.net/7FbmV/
Vous ne l'utilisez pas .sélectionné, sélectionné, . est le sélecteur de classe dans le css, semblable à la façon dont # est le sélecteur d'id.