如何将相关单元格悬停在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>