Homework/js/09_closures/mult_table/index.js

const body = document.querySelector('body')
let table = document.createElement("table")
table.style.cursor = 'pointer'
table.setAttribute('border', '1')
table.setAttribute('frame', 'void')
body.insertBefore(table, body.childNodes[0])

let cells = []
let wrappFunc = (cells) => {
   let currColor = []
   let currCells = [] 
   return (td, i, j) => {
      td.onmouseover = function() {
         currCells = cells.filter(item => item.cellIndex === j - 1 || item.parentElement.rowIndex === i - 1)
         for (const el of currCells) {
            currColor.push(el.style.backgroundColor)
            el.style.backgroundColor = 'red'
         }
      }
      td.onmouseout = function() {
         for (const el of currCells) {
            let color = currColor.shift()
            el.style.backgroundColor = color
         }
      }   
   }
}
let innerFunc = wrappFunc(cells)

for (let i = 1; i < 10; i++) {
   let tr = document.createElement("tr")
   if (i % 2 === 0) {
      tr.style.backgroundColor = '#CFCFCF'
   }
   table.appendChild(tr)


      for (let j = 1; j < 10; j++) {
      let td = document.createElement("td")      
      cells.push(td)

      td.setAttribute('align', 'center')
      td.setAttribute('width', '40px')
      td.setAttribute('height', '40px')
      tr.appendChild(td)
      td.innerText = `${i*j}`
      innerFunc(td, i, j)
   }
}