jQuery : sélectionner chaque td dans un tr

Question

J'ai besoin d'un moyen d'interagir avec chaque td dans un tr .

Pour préciser, je voudrais accéder à la première ligne du tableau, puis à la première colonne, puis à la deuxième colonne, etc. Puis passer à la deuxième ligne et répéter le processus.

Quelque chose comme ceci (pseudo-code) :

for each row in table
{
  for each column in row
  {
    do cool things
  }
}

jQuery :

$('#tblNewAttendees tr').each(function() {
  alert('tr');
  //Cool jquery magic that lets me iterate over all the td only in this row
  $(magicSelector).each(function(){
    alert('hi');
  });

});

HTML :

<table>
     <thead>
          <th>someHeader</th>
     </thead>
     <tbody>
          <tr>
               <td>want to grab this first</td>
               <td> this second </td>
          </tr>
          <tr>
               <td>this third</td>
               <td>this fourth</td>
          </tr>
     </tbody>
</table>

Answer 1

Vous pouvez simplement faire ce qui suit dans votre boucle TR :

$(this).find('td').each (function() {
  // do your cool stuff
});

Answer 2

Vous n'avez pas du tout besoin d'un sélecteur jQuery. Vous disposez déjà d'une référence aux cellules de chaque ligne via la balise cells propriété.

$('#tblNewAttendees tr').each(function() {

    $.each(this.cells, function(){
        alert('hi');
    });

});

Il est beaucoup plus efficace d'utiliser une collection que vous avez déjà, que de créer une nouvelle collection via la sélection DOM.

Ici, j'ai utilisé le jQuery.each() (docs) qui est juste une méthode générique pour l'itération et l'énumération.

Answer 3

Votre $(magicSelector) pourrait être $('td', this) . Cela permettra de saisir toutes les td qui sont des enfants de this qui, dans votre cas, est chaque tr . C'est la même chose que de faire $(this).find('td') .

$('td', this).each(function() {
// Logic
});

Answer 4

En développant la réponse ci-dessus, la fonction "each" vous renverra l'objet html de la cellule de table. Envelopper cet objet dans $() vous permettra d'effectuer des actions jquery sur celui-ci.

$(this).find('td').each (function( column, td) {
  $(td).blah
});

Answer 5

Exemple complet pour démontrer comment jQuery interroge toutes les données dans un tableau HTML.

Supposons qu'il y ait un tableau comme le suivant dans votre code HTML.

<table id="someTable">
  <thead>
    <tr>
      <td>title 0</td>
      <td>title 1</td>
      <td>title 2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 0 td 0</td>
      <td>row 0 td 1</td>
      <td>row 0 td 2</td>
    </tr>
    <tr>
      <td>row 1 td 0</td>
      <td>row 1 td 1</td>
      <td>row 1 td 2</td>
    </tr>
    <tr>
      <td>row 2 td 0</td>
      <td>row 2 td 1</td>
      <td>row 2 td 2</td>
    </tr>
    <tr> ... </tr>
    <tr> ... </tr>
    ...
    <tr> ... </tr>
    <tr>
      <td>row n td 0</td>
      <td>row n td 1</td>
      <td>row n td 2</td>
    </tr>
  </tbody>
</table>

Ensuite, le Réponse : le code pour imprimer toutes les lignes et toutes les colonnes devrait être le suivant

$('#someTable tbody tr').each( (tr_idx,tr) => {
    $(tr).children('td').each( (td_idx, td) => {
        console.log( '[' +tr_idx+ ',' +td_idx+ '] => ' + $(td).text());
    });                 
});

Après avoir exécuté le code, le résultat sera le suivant

[0,0] => row 0 td 0
[0,1] => row 0 td 1
[0,2] => row 0 td 2
[1,0] => row 1 td 0
[1,1] => row 1 td 1
[1,2] => row 1 td 2
[2,0] => row 2 td 0
[2,1] => row 2 td 1
[2,2] => row 2 td 2
...
[n,0] => row n td 0
[n,1] => row n td 1
[n,2] => row n td 2

Résumé.
Dans le code,
tr_idx est l'index de la ligne qui commence à partir de 0.
td_idx est l'index de la colonne qui commence à partir de 0.

A partir de ce code à double boucle,
vous pouvez obtenir tous les indices de boucle et les données dans chaque cellule td après avoir comparé le code source de Answer et le résultat de sortie.