javascript - jQuery - onClick td 突出显示所有行上方和下方的所有 td

Question

如果用户点击任何 td，则需要通过添加 .tr-active 类(完成和工作)来突出显示该父 tr。

我想要什么: 例如:如果用户单击第二行的第三个单元格，则应通过添加 .td-active 类来突出显示每行的所有第三个单元格。

当前只有单击的 td 正在获取类，如何将所有相等的 td 添加到 .td-active 类？

jsFiddle

Expected results:

What I am getting:

HTML

<table id="myTable">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

JavaScript:

$("table#myTable tr td").on('click', function() {
  $('table#myTable tr').removeClass('tr-active');
  $('table#myTable td').removeClass('td-active');
  $(this).addClass('td-active');
  $(this).closest('tr').addClass('tr-active');
})

Answer 1

要检索列中的所有 td，您可以使用 :nth-child() 选择器以及单击单元格的索引。试试这个:

let $table = $('#myTable');
let $tr = $table.find('tr');
let $td = $table.find('td');

$td.on('click', function() {
  $tr.removeClass('tr-active');
  $td.removeClass('td-active');

  let $cell = $(this);
  $cell.addClass('td-active');
  $cell.closest('tr').addClass('tr-active');

  let index = $cell.index();
  $table.find(`td:nth-child(${index + 1})`).addClass('td-active');
})

body {
  font-family: verdana;
  font-size: 13px;
}

table,
td {
  border: 1px solid #000;
  border-collapse: collapse;
}

td {
  padding: 5px;
  min-width: 60px;
}

.buttons {
  margin-top: 20px;
}

td.td-active {
  background-color: #ffcbcb !important;
}

tr.tr-active td {
  background-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>