Homework/js/07_dom/mult_table/index.js

tableMultDom()
function tableMultDom() {
   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])
   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")
         td.setAttribute('align', 'center')
         td.setAttribute('width', '40px')
         td.setAttribute('height', '40px')
         tr.appendChild(td)
         td.innerText = `${rowIndex*colIndex}`
       }
   }
}

// tableMultDomHighlight()
function tableMultDomHighlight() {
   const cells = document.querySelectorAll('td')
   for (const cell of cells) {
      let currColor = null
      cell.onmouseover = function() {
         currColor = this.style.backgroundColor
         this.style.backgroundColor = 'red'
      }
      cell.onmouseout = function() {
         this.style.backgroundColor = currColor
      }

   }
}

tableMultDomHighlightRowCol()
function tableMultDomHighlightRowCol() {
   const cells = Array.from(document.querySelectorAll('td')) 
   for (const cell of cells) {
      let currColor = []
      let currCells = []

      cell.onmouseover = function() {
         let cellIndex1 = this.cellIndex
         let rowIndex1 = this.parentElement.rowIndex
         currCells = cells.filter(item => item.cellIndex === cellIndex1 || item.parentElement.rowIndex === rowIndex1)

         for (const el of currCells) {
            currColor.push(el.style.backgroundColor)
            el.style.backgroundColor = 'red'
         }
      }
      cell.onmouseout = function() {
         for (const el of currCells) {
            let color = currColor.shift()
            el.style.backgroundColor = color
         }
      }
   }
}