jQuery: выбор каждого тд в тр

Мне нужен способ взаимодействия с каждым элементом td в tr.

Чтобы уточнить, я хотел бы получить доступ к первой строке таблицы, затем к первому столбцу, затем ко второму столбцу и т.д. Затем перейдите ко второй строке и повторите процесс.

Примерно так (псевдокод):

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>

Ответы

Ответ 1

Вы можете просто сделать следующее внутри своего цикла TR:

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

Ответ 2

Вам не нужен селектор jQuery. У вас уже есть ссылка на ячейки в каждой строке с помощью свойства cells.

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

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

});

Эффективно использовать коллекцию, которую у вас уже есть, чем создавать новую коллекцию с помощью выбора DOM.

Здесь я использовал метод jQuery.each() ^(docs), который это всего лишь общий метод для итерации и перечисления.

Ответ 3

Ваш $(magicSelector) может быть $('td', this). Это захватит все td, которые являются дочерними элементами this, которые в вашем случае являются tr. Это то же самое, что и при выполнении $(this).find('td').

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

Ответ 4

расширение ответа над функцией "каждый" вернет вам объект html таблицы. wrapping, что в $() позволит вам выполнять jquery-действия на нем.

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