homework/js09/script_for_index.js

// DOM: multiply table
// Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу, вложенные строки и
// ячейки в циклах. Должно получится что-то вроде этого:

// DOM: highlight cell
// Подсветить ячейку, над которой находится курсор мыши. Используйте события mouseover и mouseout, и
// style.backgroundColor для подсветки. Для того, что бы подсветить правильную ячейку, добавьте обработчики
// событий во вложенный цикл, и используйте в них ту переменную, которая хранит <td>. В таком случае замыкания
// вам помогут.


// Подсветить строку и столбец, в которой находится подсвеченная ячейка. Если у вас обработчики событий
// объявлены во вложенном цикле, то вы можете пользоваться счетчиками цикла (обычно i и j) и другими
// переменными, например переменной, содержащей в себе DOM-элемент строки.
multiply_table: {
  let table = document.createElement('table');
  document.body.append(table);
  for (let i = 0; i < 10; i++) {
    let tr = document.createElement('tr');
    table.append(tr);
    for (let j = 0; j < 10; j++) {
      let td = document.createElement('td');
      tr.append(td);
      if (i == 0) {
        td.innerText = j;
      } else if (j == 0) {
        td.innerText = i;
      } else {
        td.innerText = i * j;
      }
      handleMouseEvents(td, i, j);
    }
  }
  console.log(table);
  function handleMouseEvents(el, selectedI, selectedJ) {
    el.onmouseover = (event) => {
      for (let i = 0; i < table.children.length; i++) {
        for (let j = 0; j < table.children[i].children.length; j++) {
          if (i == selectedI || j == selectedJ) {
            table.children[i].children[j].style.backgroundColor = '#e5f3ff';
          }
        }
      }
      event.target.style.backgroundColor = '#b0d3f2';

    }
    el.onmouseout = (event) => {
      for (let i = 0; i < table.children.length; i++) {
        for (let j = 0; j < table.children[i].children.length; j++) {
          table.children[i].children[j].style.backgroundColor = '';
        }
      }
    }
  }
}