Question

我想为点击的th元素和所有相应的td元素添加一个类。单击另一个th时，必须从td和th中删除该类。

我正在尝试将th的索引与td匹配：

$('th').click(function () {
  var indexOf = $(this).index();
  $('.sortable').removeClass('sortable');
  $(this).addClass('sortable');
  $('td:nth-child('+indexOf+')').addClass('sortable');
});

虚拟HTML

<table class="data">
  <tr>
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
    <th>Entry Header 3</th>
    <th>Entry Header 4</th>
  </tr>
  <tr>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
    <td>Entry First Line 3</td>
    <td>Entry First Line 4</td>
  </tr>
  <tr>
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
  </tr>
  <tr>
    <td>Entry Last Line 1</td>
    <td>Entry Last Line 2</td>
    <td>Entry Last Line 3</td>
    <td>Entry Last Line 4</td>
  </tr>
</table>

Answer 1

这应该这样做：

$('th').click(function () {
    var indexOf = $(this).index();
    $('th,td').not('td:nth-child(' + (indexOf + 1) + '), th:nth-child(' + (indexOf + 1) + ')').removeClass('sortable')
    $(this).add('td:nth-child(' + (indexOf + 1) + ')').toggleClass('sortable');
});

<强> jsFiddle example

添加类以单击th和相应的td

1 个答案: