jQuery - onClick td подсвечивает все tds сверху и снизу всех строк

Question

Если пользователь нажимает на любой td, этот родительский tr необходимо выделить, добавив .tr-active class (Done and Working).

Что я хочу : Например: если пользователь щелкает в 3-й ячейке 2-й строки все 3-е ячейки из каждой строки должны быть выделены путем добавления .td-active class.

В настоящее время только нажатый td получает класс, как я могу добавить все равные tds в .td-active class?

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

Вы можете получить индексный столбец с помощью $(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 3

Вы можете попробовать .index() метод jQuery для получения номера столбца. Вы можете попробовать это:

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

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>