

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 = []
for (let rowIndex = 1; rowIndex < 10; rowIndex++) {
   let tr = document.createElement("tr")
   if (rowIndex % 2 === 0) {
      tr.style.backgroundColor = '#CFCFCF'
   }
   table.appendChild(tr)
      for (let colIndex = 1; colIndex < 10; colIndex++) {
      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 = `${rowIndex*colIndex}`

      let currColor = []
      let currCells = []   
      td.onmouseover = function() {
         currCells = cells.filter(item => item.cellIndex === colIndex - 1 || item.parentElement.rowIndex === rowIndex - 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
         }
      }
   }
}



