|
|
@@ -0,0 +1,60 @@
|
|
|
+//Таблица умножения
|
|
|
+
|
|
|
+let table = document.createElement('table');
|
|
|
+for (let i = 0; i < 10; i++) {
|
|
|
+ let row = document.createElement('tr');
|
|
|
+ for (let j = 0; j < 10; j++) {
|
|
|
+ let col = document.createElement('td');
|
|
|
+ let val = i * j;
|
|
|
+ if (val === 0) {
|
|
|
+ val = i || j;
|
|
|
+ }
|
|
|
+ col.innerHTML = val;
|
|
|
+ row.appendChild(col);
|
|
|
+ }
|
|
|
+
|
|
|
+ table.appendChild(row);
|
|
|
+}
|
|
|
+
|
|
|
+document.body.appendChild(table);
|
|
|
+
|
|
|
+// Подсвет ячейки и подсвет строки и столбца
|
|
|
+
|
|
|
+table.onmouseover = function (event) {
|
|
|
+ let target = event.target;
|
|
|
+ target.style.background = 'yellow';
|
|
|
+
|
|
|
+ document.querySelectorAll(".highlight").forEach(
|
|
|
+ item => item.classList.remove("highlight")
|
|
|
+ );
|
|
|
+ target.closest("tr").classList.add("highlight");
|
|
|
+ target.closest("table").querySelectorAll("tr").forEach(
|
|
|
+ row => row.cells[target.cellIndex].classList.add("highlight")
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+table.onmouseout = function (event) {
|
|
|
+ let target = event.target;
|
|
|
+ target.style.background = '';
|
|
|
+
|
|
|
+ document.querySelectorAll(".highlight").forEach(
|
|
|
+ item => item.classList.remove("highlight")
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+//Calc
|
|
|
+
|
|
|
+const numberOne = document.getElementById('firstNumber')
|
|
|
+const numberSecond = document.getElementById('secondNumber')
|
|
|
+calc.onclick = function () {
|
|
|
+ result.value = ((+numberOne.value) * (+numberSecond.value))
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//Calc Live
|
|
|
+
|
|
|
+// function calc() {
|
|
|
+// result.value = ((+numberOne.value) * (+numberSecond.value))
|
|
|
+// }
|
|
|
+// numberOne.oninput = calc
|
|
|
+// numberSecond.oninput = calc
|
