it-swarm-ru.tech

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

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

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

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

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

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

});
_

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

Здесь я использовал jQuery.each()(документы) метод, который является просто универсальным методом для итерации и перечисления.

23
user113716

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

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

если развернуть ответ выше, функция 'each' вернет вам HTML-объект table-cell. оборачивая это в $ (), вы сможете выполнять над ним действия jquery.

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