how to hover related cell to jQuery?

Question

I want to know how to use jQuery to highlight related tables.

firstly I'm looked at this fiddle and found how to highlight vertical and horizontal.

I looked through various searches to find a way, but I could not find anything similar.

I tried to make it myself, but I don't know. Please help me.

Look at the image here.

If select the cell at the left top Horizontal, vertical, and diagonal are selected.

Also select the cell at the center Horizontal, vertical, and diagonal are selected.

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

Please see below. I documented everything in the source code.

// 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>