Necesito una forma de interactuar con cada elemento td en un tr .
Para elaborar, me gustaría acceder a la primera fila de la tabla, luego a la primera columna, luego a la segunda columna, etc. Luego pasar a la segunda fila y repetir el proceso.
Algo como esto (pseudo-código):
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>Simplemente puede hacer lo siguiente dentro de su bucle TR:
$(this).find('td').each (function() { // do your cool stuff });No necesita un selector jQuery en absoluto. Ya tiene una referencia a las celdas en cada fila a través de la propiedad de cells .
$('#tblNewAttendees tr').each(function() { $.each(this.cells, function(){ alert('hi'); }); });Es mucho más eficiente utilizar una colección que ya tiene que crear una nueva colección a través de la selección de DOM.
Aquí he usado el jQuery.each() (docs) , que es solo un método genérico para la iteración y la enumeración.
Su $(magicSelector) podría ser $('td', this) . Esto tomará todos los td que son hijos de this , que en su caso es cada tr . Esto es lo mismo que hacer $(this).find('td') .
$('td', this).each(function() { // Logic });