"use strict";

let table = document.createElement("table");

for (let i = 0; i <= 9; i++) {
    let tr = document.createElement("tr");
    for (let x = 0; x <= 9; x++) {
        let td = document.createElement("td");
        td.style = `border: 1px solid grey; padding: 15px; color: black;`;
        let sum = i * x;
        if (sum == 0) {
            sum = i || x
        }
        td.innerText = sum
        tr.append(td);
    }
    table.append(tr);
}
document.body.append(table);


function highlightCell() {
    let trSome = document.querySelectorAll("tr"),
        tdSome = document.querySelectorAll("td");

    tdSome.forEach(td => {
        td.addEventListener("mouseover", (e) => {
            console.log(e)
            td.style = `background-color: orange; color: white; padding: 15px; border: 1px solid grey; cursor: pointer`;
        });

        td.addEventListener("mouseout", (e) => {
            console.log(e)
            td.style = ` color: black; padding: 15px; border: 1px solid grey;`;
        })
    });
}
// highlightCell()


function highlightRowColumn() {
    let trSome = document.querySelectorAll("tr"),
        tdSome = document.querySelectorAll("td");

    trSome.forEach(item => {
        item.addEventListener("mouseover", (e) => {
            let target = e.target,
                index = target.cellIndex,
                index2 = target.parentNode.rowIndex;

            trSome[index2].style.backgroundColor = "red";
            trSome.forEach(items => {
                items.children[index].style.backgroundColor = 'red';

            });
        });

        item.addEventListener("mouseout", (e) => {
            let target = e.target,
                index = target.cellIndex,
                index2 = target.parentNode.rowIndex;
            trSome[index2].style.backgroundColor = "white";
            trSome.forEach(item => {
                item.children[index].style.backgroundColor = '';
            })
        })
    });
}
// highlightRowColumn()