07 tables

07/script.js

@@ -0,0 +1,148 @@
+// ----------------------------------------------Таблица умножения------------------------------------------------------------------
+
+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------------------------------------------------------------------
+