web-dev-qa-db-fra.com

jQuery chaque boucle dans la rangée du tableau

Duplicate possible:
Comment itérer une table avec JQuery et accéder à certaines valeurs de cellules?

Je vais avoir quelque chose comme:

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

J'ai écrit jQuery pour parcourir chaque tr comme:

$('#tblOne tr').each(function() {...code...});

Mais le problème est qu’il passe en boucle à travers le "tr" de "tblTwo" également que je ne veux pas. Quelqu'un peut-il suggérer quelque chose pour résoudre ce problème?

javascriptjqueryhtml-tableeachtablerow
67
ANP

dans jQuery juste utiliser

$('#tblOne > tbody  > tr').each(function() {...code...});

en utilisant le sélecteur d'enfants directs (>), vous marcherez sur les descendants immédiats (et non tous descendants)

dans VanillaJS vous pouvez utiliser document.querySelectorAll() et parcourir les rangées à l'aide de forEach()

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(tr) {
    /* console.log(tr); */
});
188
fcalderan

Juste une recommandation:

Je recommanderais d'utiliser la mise en œuvre de la table DOM, c'est très simple et facile à utiliser, vous n'avez vraiment pas besoin de jQuery pour cette tâche.

var table = document.getElementById('tblOne');

var rowLength = table.rows.length;

for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  var cellLength = row.cells.length;
  for(var y=0; y<cellLength; y+=1){
    var cell = row.cells[y];

    //do something with every cell here
  }
}
57
GNi33

Utilisez sélecteur immédiat d'enfants>:

$('#tblOne > tbody  > tr')

Description: Sélectionne tous les éléments enfants directs spécifiés par "enfant" des éléments spécifiés par "parent".

19
Sarfraz