как навести курсор на связанную ячейку с jQuery?

Question

Я хочу знать, как использовать jQuery для выделения связанных таблиц.

во-первых, я посмотрел на эту скрипку и нашел, как выделить вертикальные и горизонтальные.

Я искал различные способы поиска, но не мог найти ничего похожего.

Я пытался сделать это сам, но я не знаю. Пожалуйста, помогите мне.

Посмотрите на изображение здесь.

Если выбрать ячейку слева вверху, будут выбраны горизонтальная, вертикальная и диагональная.

Также выберите ячейку в центре. Выбраны горизонтальная, вертикальная и диагональная.

$('td').mouseover(function() {
  $(this).siblings().css('background-color', '#EAD575');
  var ind = $(this).index();
  $('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');
});

$('td').mouseleave(function() {
  $(this).siblings().css('background-color', '');
  var ind = $(this).index();
  $('td:nth-child(' + (ind + 1) + ')').css('background-color', '');
});

.tg-table-light {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg-table-light td,
.tg-table-light th {
  background-color: #fff;
  border: 1px #bbb solid;
  color: #333;
  font-family: sans-serif;
  font-size: 100%;
  padding: 10px;
  vertical-align: top;
}

.tg-table-light .tg-even td {
  background-color: #eee;
}

.tg-table-light th {
  background-color: #ddd;
  color: #333;
  font-size: 110%;
  font-weight: bold;
}

.tg-table-light tr:hover td,
.tg-table-light tr.even:hover td {
  color: #222;
  background-color: #FCFBE3;
}

.tg-bf {
  font-weight: bold;
}

.tg-it {
  font-style: italic;
}

.tg-left {
  text-align: left;
}

.tg-right {
  text-align: right;
}

.tg-center {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="tg-table-light">
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
    <th>Title 3</th>
    <th>Title 4</th>
    <th>Title 5</th>
  </tr>
  <tr class="tg-even">
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
  </tr>
  <tr class="tg-even">
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
  </tr>
  <tr>
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
  </tr>
  <tr class="tg-even">
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
  </tr>
  <tr>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
  </tr>
  <tr class="tg-even">
    <td>Row 7</td>
    <td>Row 7</td>
    <td>Row 7</td>
    <td>Row 7</td>
    <td>Row 7</td>
  </tr>
  <tr>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
  </tr>
  <tr class="tg-even">
    <td>Row 9</td>
    <td>Row 9</td>
    <td>Row 9</td>
    <td>Row 9</td>
    <td>Row 9</td>
  </tr>
</table>

Answer 1

Пожалуйста, смотрите ниже. Я задокументировал все в исходном коде.

// Detect the number of columns
const columns = $("table tr:first-child th").length;
// Detect the number of rows excluding the header
const rows = $("table tr").length - 1;

$('td').mouseover(function() {

  // Coordinates of current cell
  const col = $(this).index() + 1;
  const row = $(this).closest('tr').index();

  // Cells in the same row
  $(this).siblings().css('background-color', '#EAD575');
  // Cells in the same column
  $('td:nth-child(' + col + ')').css('background-color', '#EAD575');

  // Right bottom diagonal
  $c = col - 1;
  for ($i = row; $i <= rows; $i++) {
    $('tr:eq(' + $i + ') td:eq(' + ($c++) + ')').css('background-color', '#EAD575');
  }
  // Right top diagonal
  $c = col - 1;
  for ($i = row; $i > 0; $i--) {
    $('tr:eq(' + $i + ') td:eq(' + ($c++) + ')').css('background-color', '#EAD575');
  }
  // Left bottom diagonal
  $c = col - 1;
  for ($i = row; $i <= rows; $i++) {
    if ($c >= 0) {
      $('tr:eq(' + $i + ') td:eq(' + ($c--) + ')').css('background-color', '#EAD575');
    }
  }
  // Left top diagonal
  $c = col - 1;
  for ($i = row; $i >= 0; $i--) {
    if ($c >= 0) {
      $('tr:eq(' + $i + ') td:eq(' + ($c--) + ')').css('background-color', '#EAD575');
    }
  }
});

$('td').mouseleave(function() {
  // Reset all cells
  $("td").css('background-color', '');
});

.tg-table-light {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg-table-light td,
.tg-table-light th {
  background-color: #fff;
  border: 1px #bbb solid;
  color: #333;
  font-family: sans-serif;
  font-size: 100%;
  padding: 10px;
  vertical-align: top;
}

.tg-table-light .tg-even td {
  background-color: #eee;
}

.tg-table-light th {
  background-color: #ddd;
  color: #333;
  font-size: 110%;
  font-weight: bold;
}

.tg-table-light tr:hover td,
.tg-table-light tr.even:hover td {
  color: #222;
  background-color: #FCFBE3;
}

.tg-bf {
  font-weight: bold;
}

.tg-it {
  font-style: italic;
}

.tg-left {
  text-align: left;
}

.tg-right {
  text-align: right;
}

.tg-center {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="tg-table-light">
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
    <th>Title 3</th>
    <th>Title 4</th>
    <th>Title 5</th>
  </tr>

  <tr class="tg-even">
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>

  <tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
  </tr>

  <tr class="tg-even">
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
  </tr>

  <tr>
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
  </tr>

  <tr class="tg-even">
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
  </tr>

  <tr>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
  </tr>

  <tr class="tg-even">
    <td>Row 7</td>
    <td>Row 7</td>
    <td>Row 7</td>
    <td>Row 7</td>
    <td>Row 7</td>
  </tr>

  <tr>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
  </tr>

  <tr class="tg-even">
    <td>Row 9</td>
    <td>Row 9</td>
    <td>Row 9</td>
    <td>Row 9</td>
    <td>Row 9</td>
  </tr>
</table>