web-dev-qa-db-fra.com

Cliquez sur les lignes du tableau pour cocher la case à l'aide de jQuery

Comme je n’avais trouvé aucune question posée auparavant sur la façon de cocher la case en cliquant sur une ligne du tableau, je voudrais donc partager mon approche à cet égard.

jquerycheckboxhtml-table
24
Mr. Alien

Afin de sélectionner la case à cocher d'une ligne dans la table, nous allons d'abord vérifier si la variable typeattribute de l'élément que nous ciblons n'est pas une case à cocher, si ce n'est pas une case à cocher que nous allons cocher toutes les cases à cocher imbriquées dans cette ligne du tableau.

$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});

Démo

Si vous souhaitez mettre en surbrillance la ligne du tableau sur checkboxchecked, nous pouvons utiliser une condition if avec is(":checked"), si oui, nous trouvons l'élément tr le plus proche en utilisant .closest() et nous y ajoutons une classe en utilisant addClass()

$("input[type='checkbox']").change(function (e) {
    if ($(this).is(":checked")) { //If the checkbox is checked
        $(this).closest('tr').addClass("highlight_row"); 
        //Add class on checkbox checked
    } else {
        $(this).closest('tr').removeClass("highlight_row");
        //Remove class on checkbox uncheck
    }
});

Démo

76
Mr. Alien

Cette question m’était utile mais j’avais un problème avec la solution précédente. Si vous cliquez sur un lien dans une cellule de tableau, la case à cocher ..__ sera déclenchée. J'ai googlé ceci et j'ai vu une proposition visant à ajouter un event.stopPropagation() sur les liens du tableau, comme ceci:

$('.record_table tr a').click(function(event) {
  event.stopPropagation();
});

Cette solution était une mauvaise idée car j'avais un peu de jstery bootstrap popover sur un lien de la table ...

Voici donc une solution qui me convient mieux. En passant, avec Bootstrap 2.3, la surbrillance de la ligne est réalisée en ajoutant la classe "info" à la commande tr . Pour utiliser ce code, il vous suffit d'ajouter class="selectable" à la balise table.

$(".selectable tbody tr input[type=checkbox]").change(function(e){
  if (e.target.checked)
    $(this).closest("tr").addClass("info");
  else
    $(this).closest("tr").removeClass("info");
});

$(".selectable tbody tr").click(function(e){
  if (e.target.type != 'checkbox' && e.target.tagName != 'A'){
    var cb = $(this).find("input[type=checkbox]");
    cb.trigger('click');
  }
});

Vous voudrez probablement être plus spécifique avec la condition de test, par exemple si vous avez d'autres entrées dans la ligne.

7
Jérémie

Déclencher un clic comme beaucoup des solutions fournies ci-dessus entraînera l'exécution de la fonction deux fois. Mettez à jour la valeur prop à la place:

$('tr').click(function(event){
  alert('function runs twice');
  if(event.target.type !== 'checkbox'){
    //$(':checkbox', this).trigger('click');
    // Change property instead
    $(':checkbox', this).prop('checked', true);
  }
});

Lien vers l'exemple jsfiddle ici

3
CR Rollyson

Vous pouvez simplement déclencher cet événement click ... :) 

  $(document).ready(function()
    {
      $("table tr th :checkbox").click(function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

OU 

  $(document).ready(function()
    {
      $("table tr th :checkbox").on('click',function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });
0
Kalpesh Desai

Même si le @Mr accepté Alien answer fonctionne très bien, cela ne fonctionne pas si vous décidez d'ajouter une nouvelle ligne <tr> de manière dynamique avec jQuery à un moment donné.

Je recommande d'utiliser une approche de délégation d'événements, qui n'est qu'une légère modification de la réponse acceptée.

Au lieu de:

... $('.record_table tr').click(function(event) { ...

utilisation

... $('.record_table').on('click', 'tr', function(event) { ...

Et pareil pour la surbrillance, utilisez:

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

Plus d'informations ici: L'événement Click ne se déclenche pas pour les lignes de table ajoutées dynamiquement

0
WojtylaCz