Как найти ценральную ячейку в таблице

Question

Существует таблица с нечетным количеством столбцов и строк. Как найти центральную ячейку.

Моё решение лобовое, но оно не сработает, если столбиков или строк будет больше.

  let button = document.querySelector("button");
  let tds = document.querySelectorAll("td"); // получаю массив td
  let value = 0 // начальное значение для ячеек
  tds.forEach((td)=> { //перебираю все td
    button.addEventListener("click", function () {
       value++ // получаю все номера td
      if (value % 13 == 0) { //  делаю в лоб, получая номер центральной ячейки
        td.style.backgroundColor = "black"; // присваюваю этой ячейке новый цвет
      }
    })
  })

 <table id="field">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<button>press me</button>

Answer 1

сначала нужно найти количество всех td amount_td (длина вашего массива tds), тогда индекс центральной ячейки будет amount_td // 2 для чётного amount_td и amount_td // 2 + 1 для нечетного соответственно

Answer 2

Как найти ценральную ячейку в таблице

Для таблиц, аналогичных данной, такое можно сделать вот таким образом.

document.querySelector("button").addEventListener("click", function(){
  const i = Math.round(test.rows.length / 2) - 1
  const j = Math.round(test.rows[0].cells.length / 2) - 1
  test.rows[i].cells[j].classList.add('on')
  console.log(i, j)
})

td {
  width: 10px;
  height: 10px;
}
.on {
  background-color: #000;
}

<button>press me</button>
<table id="test" border='1'>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

БЛОГ НА HUSL

Как найти ценральную ячейку в таблице

Ответы (2 шт):