homework/DOM-closures/script.js

let table = document.createElement('table')
table.id = 'mulTable'

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.style.textAlign = 'center'
        td.style.padding = '5px'
        td.style.border = '1px solid dimgrey'
        td.innerText = `${i * j}`
        td_tr_Listener(td, j, i, tr)
        tr.appendChild(td)
    }
    table.appendChild(tr)
}

document.getElementsByTagName('body')[0].appendChild(table)

function td_tr_Listener(td, col, row, tr) {
    let _td = td
    let _tr = tr
    let _col, _row

    td.onmouseover = function(td) {
        _col = col - 1
        _row = row - 1
        for(let i of _tr.parentElement.children) {
            i.children[_col].style.backgroundColor = 'black'
            i.children[_col].style.color = 'white'
        }
        _td.style.backgroundColor = 'magenta'
        _tr.parentElement.children[_row].style.backgroundColor = 'aquamarine'
    }

    td.onmouseout = function(td) {
        for(let i of _tr.parentElement.children) {
            for(let j of i.children) {
                j.style.backgroundColor = 'transparent'
                j.style.color = 'black'
            }
        }
        _td.style.backgroundColor = 'transparent'
        _tr.style.backgroundColor = 'transparent'
    }
}