illiaKozyr
/
Homework


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div>
            <input type="number" id="number1" />
            <input type="number" id="number2" />
            <button id="calc">Посчитать</button>
            <input type="text" name="" id="result" />
        </div>

        <script>
            // -------------------Таблица умножения, Подсветить ячейку, Подсветить строку и столбец

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

            for (let i = 1; i < 10; i++) {
                let tr = document.createElement("tr");
                table.append(tr);
                tr.style.border = "1px solid black";
                for (let a = 1; a < 10; a++) {
                    let td = document.createElement("td");
                    tr.append(td);
                    td.innerText = i * a;
                    td.style.border = "2px solid black";
                    td.style.padding = "10px";
                    td.style.margin = "0px";
                }
            }

            let tdarr = document.querySelectorAll("td");

            tdarr.forEach(
                (tdOn) =>
                    (tdOn.onmousemove = function () {
                        this.style.backgroundColor = "cyan";
                        this.parentElement.style.backgroundColor = "cyan";
                        let index = this.cellIndex;
                        let column = document.querySelectorAll("tr");
                        column.forEach(
                            (columns) =>
                                (columns.children[index].style.backgroundColor =
                                    "cyan")
                        );
                    })
            );

            

            tdarr.forEach(
                (tdOut) =>
                    (tdOut.onmouseout = function () {
                        this.style.backgroundColor = "transparent";
                        this.parentElement.style.backgroundColor =
                            "transparent";
                        let index = this.cellIndex;
                        let column = document.querySelectorAll("tr");
                        column.forEach(
                            (columns) =>
                                (columns.children[index].style.backgroundColor =
                                    "transparent")
                        );
                    })
            );

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

            let number1 = document.getElementById("number1");
            let number2 = document.getElementById("number2");

            calc.onclick = function () {
                alert(+number1.value + +number2.value);
            };

            // ------------------------ Calc Live

            function calc() {
                result.value = +number1.value + +number2.value;
            }

            number1.oninput = calc;
            number2.oninput = calc;
            
        </script>
    </body>
</html>