<style>
  table {
    border: 1px solid black;
    border-collapse: collapse;
  }

  td {
    width: 50px;
    height: 50px;
    border: 1px solid black;
  }

  .red {
    background: red;
  }
</style>
<table>
  <tr data-row="1">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5"></td>
  </tr>
  <tr data-row="2">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5"></td>
  </tr>
  <tr data-row="3">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5"></td>
  </tr>
  <tr data-row="4">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5"></td>
  </tr>
  <tr data-row="5">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5"></td>
  </tr>
</table>

<script>
  var table = document.querySelector('table');

  var paintAdjacentCells = function (row, col) {
    var previousRowIndex = row - 1;
    var nextRowIndex = row + 1;
    var previousColIndex = col - 1;
    var nextColIndex = col + 1;

    var currentCell = table.querySelector(`tr[data-row="${row}"] td[data-col="${col}"]`);
    var previousRow = table.querySelector(`tr[data-row="${previousRowIndex}"]`);
    var nextRow = table.querySelector(`tr[data-row="${nextRowIndex}"]`);
    var previousCell = table.querySelector(`tr[data-row="${row}"] td[data-col="${previousColIndex}"]`);
    var nextCell = table.querySelector(`tr[data-row="${row}"] td[data-col="${nextColIndex}"]`);

    currentCell.classList.toggle('red');

    if (previousRow) {
      previousRow.children[col - 1].classList.toggle('red');
    }

    if (nextRow) {
      nextRow.children[col - 1].classList.toggle('red');
    }

    if (previousCell) {
      previousCell.classList.toggle('red');
    }

    if (nextCell) {
      nextCell.classList.toggle('red');
    }
  };

  table.addEventListener('click', function (e) {
    if (e.target.nodeName !== 'TD') {
      return;
    }

    var row = Number.parseInt(event.target.parentNode.dataset.row);
    var col = Number.parseInt(event.target.dataset.col);

    paintAdjacentCells(row, col);
  });
</script>