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");
});
InformationsquelleAutor Taaam | 2014-06-20