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 } } } }