jQuery - OnClick, change la couleur de fond pour les cellules de tableau

Laissez-moi vous montrer une démo: ici

c'est de travailler pour uniquement les lignes. sa ne fonctionne pas pour les cellules. je veux changer de cellules (tds') couleurs d'arrière-plan avec des clics de souris.

Par exemple: une table, et il dispose de 4 tds. le tableau de la couleur d'arrière-plan est blanc. si je clique sur un td, td doivent être de couleur rouge, que si je clique à b, de b td doivent être de couleur rouge et un td doit être blanc à nouveau. si je clique sur c que c doit être rouge et b doivent être blancs de la droite maintenant.

A - B

C - D

InformationsquelleAutor andrew | 2010-12-28
  1. 3

    Essayez de mettre à jour le JavaScript pour:

    $( function() {
  $('td').click( function() {
    $(this).parents('table').find('td').each( function( index, element ) {
        $(element).removeClass('on');
    } );
    $(this).addClass('on');
  } );
} );

    Aperçu

    • omg,un parfait et rapide réponse. cette réponse m'a aidé très bien. je vous remercie.
    • -1 je doute qu'il veut lier CHAQUE td sur clic... ce serait lier chaque td. en outre, il ne se lient pas la td, créé APRÈS le rendu. vous devez utiliser .en direct lorsque vous souhaitez lier n'importe quoi vraiment
    • Seth: je l'ai mise à jour un peu de ce qui était déjà là. La personne qui a posé la question n'a jamais dit qu'il y aura une possibilité d'avenir td s générées ou qu'une seule table 's td devrait être touchée.
    • andrew: Content que vous avez trouvé ma réponse utile. Si oui, vous pouvez sélectionner ma réponse et upvote il.
    • +1, ce qui remplit la demande de l'utilisateur. L'idée est déjà là et c'est à l'utilisateur comment il explorer cette idée.
    InformationsquelleAutor Alan Haggai Alavi
  2. 1

    Au lieu d'avoir la ligne:

    $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");

    vous pouvez simplement store, qui est la couleur de la cellule et de supprimer la classe sans avoir à les chercher, comme ceci:

    var light = null;
$(function(){
  $("td").click(function(){
     if(light) { light.removeClass("on"); }
     light = $(this);
     light.addClass("on");
  });
});
    InformationsquelleAutor dvvc
  3. 0

    HTML: ajouter une classe à la table:

    <table class="color_changing">...</table>

    jQuery:

    $('table.color_changing tr td').live('click', function(){
  $(this).parent().parent().each('td', function(){
    $(this).removeClass('red');
  });

  $(this).addClass('red');
});

    devrait fonctionner!

    InformationsquelleAutor sethvargo
  4. 0

    Que diriez-vous si vous faites cela?

    <script>$(function(){
  $("td").click(function(){
    $(this).addClass("on").siblings().removeClass("on");
  });
});</script>

    Il va faire le même effet avec les autres TD cellules d'une même ligne. Ou voulez-vous une cellule d'éclairage jusqu'à désactiver toutes les autres cellules du tableau, peu importe la ligne?

    InformationsquelleAutor Marcos Buarque