javascript - 如何将相关单元格悬停到 jQuery？

Question

我想知道如何使用 jQuery 来突出相关的表格。

首先我看了这个fiddle并找到了如何突出显示垂直和水平。

我通过各种搜索寻找方法，但找不到类似的东西。

我试过自己做，但我不知道。请帮助我。

看这里的图片。

如果选择左上角的单元格，水平、垂直和对 Angular 线被选中。

同时选择中心的单元格水平、垂直和对 Angular 线被选中。

$('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>