主页 / 问题 / 817501
Accepted
LiaVa
Asked:2020-04-22 14:12:57 +0000 UTC2020-04-22 14:12:57 +0000 UTC

如何获取相邻的表格单元格？

  • 772

情况是这样的：

我将鼠标悬停在任何表格单元格上，并希望获得一个包含相邻单元格的数组（列表/对象，根本不重要）。表格可以随意格式化。

事实上，有一个解决方案（更准确地说，一个想法）与单元格坐标，但我想知道更多的方法。

javascript

2 个回答

  1. 对于元素td，属性parentElement指向父元素tr。
    而对于元素tr，该属性children包含子元素的集合td。

    var table = document.getElementById('my-table'); 
for (let td of table.querySelectorAll('td')) 
  td.addEventListener('mouseenter', showSiblings);

function showSiblings() {
  let str = '', 
      siblings = this.parentElement.children; 
  for (let td of siblings) {
    if (td === this)
      str += ` [${td.textContent}]`; 
    else
      str += `  ${td.textContent} `;  
  }
  console.clear(); 
  console.log(str); 
}
    table { border-collapse: collapse; text-align: center; }
   td { width: 50px; height: 30px; border: 1px solid #ccc; }
    <table id="my-table">
  <thead></thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
    <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
  </tbody>
</table>

    如果还需要接收上/下行中的单元格，那么您可以使用和- 它们分别引用上一个和下一个tr这样的元素属性。previousElementSiblingnextElementSiblingtr

    • 3
  2. Best Answer

      const $table = document.querySelector('table');
  const $input = document.querySelector('input');
  const $span = document.querySelector('span');

  $table.addEventListener('mousemove', onMove);
  $input.addEventListener('change', onChange);

  function clean() {
    const $actives = $table.querySelectorAll('.active');
    const $neighbours = $table.querySelectorAll('.neighbour');

    $actives.forEach($active => $active.classList.remove('active'));
    $neighbours.forEach($neighbour => $neighbour.classList.remove('neighbour'));
  }

  function indexOf($element) {
    return Array.prototype.slice.call($element.parentElement.children).indexOf($element);
  }

  function onChange() {
    $span.innerHTML = $input.value;
  }

  onChange();

  function onMove(event) {
    const $target = event.target;

    if ($target.tagName !== 'TD' || $target.classList.contains('active')) {
      return;
    }

    const far = parseInt($input.value);
    const neighbours = getNeighbors($target, far);

    clean();

    $target.classList.add('active');
    neighbours.forEach(neighbour => neighbour.classList.add('neighbour'));
  }

  /**
   * Получить соседей ячейки
   * @param {HTMLTableCellElement} $cell Исходня ячейка
   * @param {Number} far На сколько далёких соседей нужно получить
   * @return {HTMLTableCellElement[]}
   */
  function getNeighbors($cell, far = 1) {
    // выбираем строку ячейки
    const $row = $cell.parentElement;
    // выбираем элемент, который держит все строки (обычно это <table> или <tbody>)
    const $wrapper = $row.parentElement;

    // находим индекс исходной ячеки
    const index = [
      indexOf($row), // индекс строки
      indexOf($cell) // индекс ячейки
    ];

    // вычисляем ограничивающий "ящик"
    const bbox = [
      Math.max(index[0] - far, 0), // индекс минимальной строки
      Math.max(index[1] - far, 0), // индекс минимальной ячейки
      Math.min(index[0] + far, $wrapper.children.length - 1), // индекс максимальной строки
      Math.min(index[1] + far, $row.children.length - 1) // индекс максимальной ячейки
    ];

    // массив с результатом
    const list = [];

    // перебираем все строки из bbox
    for (let i = bbox[0]; i < bbox[2] + 1; i++) {
      const $sRow = $wrapper.children.item(i);

      // в рамках каждой строки, перебираем все ячейки из bbox
      for (let j = bbox[1]; j < bbox[3] + 1; j++) {

        // если сейчас ячейка является исходной, пропускаем её
        if (i === index[0] && j === index[1]) {
          continue;
        }

        const $sCell = $sRow.children.item(j);

        list.push($sCell);
      }
    }

    return list;
  }
    table {
  border: 1px;
}

td {
  width: 30px;
  height: 30px;
  content: '';
  border: 1px solid green;
}

td.active {
  background: #ff0000;
}

td.neighbour {
  background: #ff9999;
}
    <input type="range" min="0" max="5" step="1" value="1">
<span></span>
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

    • 3

相关问题