Добавить <th>Класс к <td>в том же столбце

Question

Я искал всю сеть в течение нескольких часов, но до сих пор не могу понять это.

<table>  
  <tr>  
    <th class="name">Name</th>
    <th class="age">Age</th>
    <th class="nick">Nick</th>
  </tr>  

  <tr>  
    <td>John</td>
    <td>30</td>
    <td>Johnny</td>
  </tr>

  <tr>  
    <td>Robert</td>
    <td>35</td>
    <td>Bob</td>
  </tr>
</table>

Есть ли способ добавить классы из этих заголовков к тегам TD в том же столбце?

Answer 1

Я бы сделал это так:

$("table th").each(function(i, val) {
  var th = $(this);
  var selector = "td:nth-child(" + (i+1) + ")";
  th.parent().siblings().find(selector).attr("class", th.attr("class"));
});

Используется селектор :nth-child для эффективного получения того же <td> в том же столбце. Однако, если вы используете элементы rowspan / colspan, он ломается.

Примечание: Вы должны добавить единицу к индексу, потому что индекс на each() основан на нуле, но :nth-child() на основе одного.

Кроме того, вы не можете использовать селектор :eq в этом контексте, так как он соответствует только одному элементу.