I need a way to interact with each td element in a tr.
To elaborate, I would like to access the first table row, then the first column, then the second column, etc. Then move onto the second row and repeat the process.
Something like this (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>
You can simply do the following inside your TR loop:
$(this).find('td').each (function() {
// do your cool stuff
});
You don't need a jQuery selector at all. You already have a reference to the cells in each row via the cells property.
$('#tblNewAttendees tr').each(function() {
$.each(this.cells, function(){
alert('hi');
});
});
It is far more efficient to utilize a collection that you already have, than to create a new collection via DOM selection.
Here I've used the jQuery.each()(docs) method which is just a generic method for iteration and enumeration.
Your $(magicSelector) could be $('td', this). This will grab all td that are children of this, which in your case is each tr. This is the same as doing $(this).find('td').
$('td', this).each(function() {
// Logic
});