Выделенные строку и столбец в таблице умножения по наведению мыши на одну из ячеек

Question

Как подсветить строку и столбец по наведению мыши на одну из ячеек

let table=document.createElement("table");

document.body.append(table);
for(let i=1;i<=10;i++){
    let tr=document.createElement("tr");
    table.appendChild(tr);
    for(let j=1;j<=10;j++){
        let td=document.createElement("td");
        tr.appendChild(td);
        td.innerText=i*j;
    }
}
table.onmouseover=function(event){
    let target=event.target;
    target.style.background="red";
}
table.onmouseout=function(event){
    let target=event.target;
    target.style.background="";
}

Выделить ячейку получается, а как столбец и строку - не понимаю...

Answer 1

На чистом JS, можно так (но думаю это "дорого"):

let table = document.createElement("table");
const tableRows = table.rows;
const cellGroup = table.getElementsByTagName('colgroup');

const goHover = (e) => {
  e.stopPropagation();
  const indexCell = e.target.cellIndex;
  const indexRow = e.target.closest('tr').rowIndex;
  const allCell = table.getElementsByTagName('td');
  tableRows[indexRow].classList.add('hover');
  cellGroup[indexCell].classList.add('hover');
}

const removeClassHover = (e) => {
  for (let i = 0, max = tableRows.length; i < max; i += 1) {
    tableRows[i].classList.remove('hover');
  }
  for (let i = 0, max = cellGroup.length; i < max; i += 1) {
    cellGroup[i].classList.remove('hover');
  }
}

for (let j = 1; j <= 10; j++) {
  let tgroup = document.createElement("colgroup");
  table.appendChild(tgroup);
}

document.body.append(table);
for (let i = 1; i <= 10; i++) {
  let tr = document.createElement("tr");
  table.appendChild(tr);
  for (let j = 1; j <= 10; j++) {
    let td = document.createElement("td");
    tr.appendChild(td);
    td.innerText = i * j;
    td.addEventListener("mouseover", goHover);
    td.addEventListener("mouseout", removeClassHover);
  }
}

td {
  padding: 5px;
  cursor: pointer;
}

.hover {
  background: #eee;
}

Можно скомбинировать с CSS, например так:

let table = document.createElement("table");
// const tableRows = table.rows;
const cellGroup = table.getElementsByTagName('colgroup');

const goHover = (e) => {
  e.stopPropagation();
  const indexCell = e.target.cellIndex;
  const indexRow = e.target.closest('tr').rowIndex;
  const allCell = table.getElementsByTagName('td');
  // tableRows[indexRow].classList.add('hover');
  cellGroup[indexCell].classList.add('hover');
}

const removeClassHover = (e) => {
  /*
  for (let i = 0, max = tableRows.length; i < max; i += 1) {
    tableRows[i].classList.remove('hover');
  }
  */
  for (let i = 0, max = cellGroup.length; i < max; i += 1) {
    cellGroup[i].classList.remove('hover');
  }
}

for (let j = 1; j <= 10; j++) {
  let tgroup = document.createElement("colgroup");
  table.appendChild(tgroup);
}

document.body.append(table);
for (let i = 1; i <= 10; i++) {
  let tr = document.createElement("tr");
  table.appendChild(tr);
  for (let j = 1; j <= 10; j++) {
    let td = document.createElement("td");
    tr.appendChild(td);
    td.innerText = i * j;
    td.addEventListener("mouseover", goHover);
    td.addEventListener("mouseout", removeClassHover);
  }
}

td {
  padding: 5px;
  cursor: pointer;
}

tr:hover,
.hover {
  background: #eee;
}
td:hover {
background: #aaa;
}

В конечном итоге, если со строками все просто, и вопрос решается добавлением элементарного hover, то со столбцами сложнее, требует дополнительной обработки. Для этого можно воспользоваться colgroup (поддержка), чтобы облегчить манипуляции со столбцами - как с группами. У каждого подхода свои минусы и плюсы, так что выбор за вами. Думаю, вы вполне можете нагуглить и на чистом CSS решение вашей задачи.

БЛОГ НА HUSL

Выделенные строку и столбец в таблице умножения по наведению мыши на одну из ячеек

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