Homework/07/script.js

// ----------------------------------------------Таблица умножения------------------------------------------------------------------

let table = document.createElement("table");
table.setAttribute("border", "1");
document.body.append(table);

for (let y = 0; y < 10; y++) {
    let tr = document.createElement("tr");
    table.append(tr);

    for (let x = 0; x < 10; x++) {
        let td = document.createElement("td");
        tr.append(td);
        let temp = x * y;
        if (x === 0) temp = y;
        else if (y === 0) temp = x;
        td.innerText = temp;
        // td.innerHTML(x * y);
        td.style.width = "50px";
        td.style.height = "25px";
        td.style.textAlign = "center";

        // -----------------Подсветить ячейку-------------------- 

        td.onmousemove = function () {
            this.style.background = "yellow";
        }

        td.onmouseout = function () {
            this.style.background = "none";
        }
    }
}


//  ____Тестовый вариант, чтобы разобраться_____

// document.write("<table width=60% border=1 cellspacing=0 cellpadding=4>")
// // document.write("<table  border=1 >")

// for (i = 0; i < 10; i++) {
//     if(i === 0) i=1
//     document.write("<tr>");
//     for (j = 0; j < 10; j++) {
//         if(i === 0) ++j
//         document.write("<td>" + (j * i) + "</td>");
//     }
//     document.write("</tr>");
// }

// document.write("</table>")

// ---------------------------------------------Подсветить строку и столбец------------------------------------------------------------------

function light() {
    let table = document.createElement("table");
    table.setAttribute("border", "1");
    document.body.append(table);

    for (let y = 0; y < 10; y++) {
        let tr = document.createElement("tr");
        table.append(tr);

        for (let x = 0; x < 10; x++) {
            let td = document.createElement("td");
            tr.append(td);
            let temp = x * y;
            if (x === 0) temp = y;
            else if (y === 0) temp = x;
            td.innerText = temp;
            // td.innerHTML(x * y);
            td.style.width = "50px";
            td.style.height = "25px";
            td.style.textAlign = "center";

            // -----------------Подсветить ячейку-------------------- 

            td.onmousemove = function () {

                for (let item of this.parentElement.children) {
                    item.style.background = "yellowgreen";
                }
                for (let item of this.parentElement.parentElement.children) {
                    for (let item2 of item.children) {
                        if (item2.cellIndex === this.cellIndex) {
                            item2.style.background = "yellowgreen";
                        }
                    }
                }
            }

            td.onmouseout = function () {

                for (let item of this.parentElement.children) {
                    item.style.background = "none";
                }
                for (let item of this.parentElement.parentElement.children) {
                    for (let item2 of item.children) {
                        if (item2.cellIndex === this.cellIndex) {
                            item2.style.background = "none";
                        }
                    }
                }
            }
        }
    }
}

light();

// Выбор ячейки

table = document.createElement("table");
table.setAttribute("border", "1");
document.body.append(table);

for (let y = 0; y < 10; y++) {
    let tr = document.createElement("tr");
    table.append(tr);

    for (let x = 0; x < 10; x++) {
        let td = document.createElement("td");
        tr.append(td);
        let temp = x * y;
        if (x === 0) temp = y;
        else if (y === 0) temp = x;
        td.innerText = temp;
        td.style.width = "50px";
        td.style.height = "25px";
        td.style.textAlign = "center";

        let flag = false;

        td.onclick = function () {
            if (!flag) {
                this.style.background = "darkgrey";
                this.style.color = "white"
            } else {
                this.style.background = "none";
                this.style.color = "black"
            }
            flag = !flag;
        }
    }
}

// ----------------------------------------------Calc------------------------------------------------------------------