// таблица умножения
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}`
        tr.appendChild(td)
    }
    table.appendChild(tr)
}

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

// подсветить ячейку и строку и колонку
document.getElementById('mulTable').addEventListener('mouseover', (e)=> {
    if(e.target.closest('td')) {
        for(let i of e.currentTarget.children) {
            i.children[e.target.cellIndex].style.backgroundColor = 'black'
            i.children[e.target.cellIndex].style.color = 'white'
        }
    
        e.target.closest('td').style.backgroundColor = 'yellow'
        e.target.closest('td').style.color = 'black'
        e.target.closest('tr').style.backgroundColor = 'purple'
    }
})

document.getElementById('mulTable').addEventListener('mouseout', (e)=> { 
    if(e.target.closest('td')) {
        for(let i of e.currentTarget.children) {
            for(let j of i.children) {
                j.style.backgroundColor = 'transparent'
                j.style.color = 'black'
            }
        }
        
        e.target.closest('td').style.backgroundColor = 'transparent'
        e.target.closest('tr').style.backgroundColor = 'transparent'
    }
})

//сalc