2012-05-03 26 views
53

Duplicar posibles:
How to iterate a table rows with JQuery and access some cell values?jQuery cada bucle en la fila de la tabla

estoy teniendo algo como:

<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> 

He escrito jQuery para recorrer cada tr como :

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

Pero el problema es que también pasa por el "tr" de "tblTwo" que no quiero. ¿Alguien puede sugerir algo para resolver esto?

Respuesta

150

en jQuery sólo tiene que utilizar

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

usando el selector de los niños directa (>) usted tendrá que caminar sobre los descendientes inmediatos (y no todos descendientes)


en VanillaJS le puede use document.querySelectorAll() y camine sobre las filas usando forEach()

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

@Raynos por favor explique en lugar de "golpear y ejecutar" ... –

+2

¿Cómo me refiero al elemento tr dentro de la función? – jumxozizi

+1

@Rubiksmomo - use function (index, element) - https://api.jquery.com/each/ – FrenkyB

18

Uso immediate children selector>:

$('#tblOne > tbody > tr') 

Descripción: Selecciona todos los elementos secundarios directos especificado por "niño" de elementos especificados por el "padre".

50

Sólo una recomendación:

me gustaría recomendar el uso de la aplicación mesa de DOM, es muy sencillo y fácil de usar, que realmente no es necesario jQuery para esta tarea.

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 
    } 
} 
+13

Acepto que jQuery a menudo no es realmente necesario para este tipo de tarea (especialmente en un navegador más nuevo con '.querySelectorAll() ') pero si ya estás incluyendo jQuery es un desperdicio no usarlo (y la solución DOM con dos' for' loop no es tan sencilla, imho) – fcalderan

+0

Pero si ya estás incluyendo jQuery, entonces lo estás haciendo mal y necesitas para eliminarlo lo antes posible – Raynos

+0

*** utilizando *** jQuery también tiene consecuencias. $() hace aproximadamente 100 cosas antes de que realmente seleccione su elemento por su id (como un ejemplo). No digo que no lo use ... pero para cosas triviales como esta, donde la solución vanilla js es como unos pocos caracteres más para escribir, está ahorrando en el procesamiento. aunque no mucho ... pero ¿por qué hacer 10 000/segundo cuando puedes hacer 10 000 000 ... simplemente tiene sentido, no? – rlemon

Cuestiones relacionadas