javascript - jQuery - onClick td hightligh 所有行上方和下方的所有 td

Question

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

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

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

jsFiddle

预期成绩：

我得到了什么：

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>

Answer 2

您可以尝试获取列号的.index()方法。jQuery你可以试试这个：

$("table#myTable tr td").on('click', function() {
    let index = $(this).index();
    $(`#myTable tr td:nth-child(${index + 1})`).addClass('td-active');
});

Answer 3

您可以通过以下方式获取索引列$(this).closest("td").index()

并设置类

$(this).closest('table').find('tr').find('>td:eq('+ $(this).closest("td").index() +')').addClass('td-active')

$("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('table').find('tr').find('>td:eq('+ $(this).closest("td").index() +')').addClass('td-active')
  $(this).closest('tr').addClass('tr-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>

Answer 4

我会使用 colgroup 而不必在列中的每个 td 上设置一个类。

var table = $("#myTable")
table.on("click", "td", function () {
  table.find(".active").removeClass("active")
  var td = $(this).addClass("active")
  var index = td.index()
  td.parent("tr").addClass("active")
  table.find("colgroup").eq(index).addClass("active")
})

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: .5em;
}

#myTable colgroup.active {
  background-color: #fdd;
}

#myTable tr.active {
  background-color: #cdd;
}

#myTable td.active {
  background-color: #b88;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <tbody>
    <tr>
      <td>cell a-1</td>
      <td>cell b-1</td>
      <td>cell c-1</td>
      <td>cell d-1</td>
    </tr>
    <tr>
      <td>cell a-2</td>
      <td>cell b-2</td>
      <td>cell c-2</td>
      <td>cell d-2</td>
    </tr>
    <tr>
      <td>cell a-3</td>
      <td>cell b-3</td>
      <td>cell c-3</td>
      <td>cell d-3</td>
    </tr>
    <tr>
      <td>cell a-4</td>
      <td>cell b-4</td>
      <td>cell c-4</td>
      <td>cell d-4</td>
    </tr>    
  </tbody>
</table>