let $table = document.createElement('table');

for(let i = 1; i < 10; i++) {
    let $tr = document.createElement('tr')
    for(let j = 1; j < 10; j++) {
        let $td = document.createElement('td')
        $td.innerText = String(j * i)
        $td.onmouseover = (e) => {
           Array.from($table.children).map(item => {
            Array.from(item.children).filter(item => item.cellIndex === e.target.cellIndex).map(item => item.style.backgroundColor = 'red')
        })
            $td.style.backgroundColor = 'green'
        }
        $td.onmouseout = (e) => {
            Array.from($table.children).map(item => {
                Array.from(item.children).filter(item => item.cellIndex === e.target.cellIndex).map(item => item.style.backgroundColor = 'white')
            })
        }
        $tr.appendChild($td)
    }
    $table.appendChild($tr)
}
document.body.appendChild($table)

const $n1 = document.querySelector('#n1')
const $n2 = document.querySelector('#n2')
const $calcBtn = document.querySelector('#calcBtn')
const $result = document.querySelector('#result')

const calcSum = () => {
    return $result.innerText = String(+$n1.value + +$n2.value)
}

$calcBtn.addEventListener( 'click',  () => {
    calcSum()
})
$n1.onchange = calcSum()
$n2.onchange = calcSum()
$calcBtn.onclick = calcSum()