|
@@ -1,35 +1,57 @@
|
|
|
/* Таблица умножения */
|
|
|
-
|
|
|
let table = document.createElement("table")
|
|
|
document.body.append(table)
|
|
|
|
|
|
- for(let i = 1; i < 10; i ++) {
|
|
|
- let tr = document.createElement("tr")
|
|
|
- table.append(tr)
|
|
|
+for (let i = 0; i < 10; i++) {
|
|
|
+ let tr = document.createElement("tr")
|
|
|
+ table.append(tr)
|
|
|
+
|
|
|
+ for (let j = 0; j < 10; j++) {
|
|
|
+ let td = document.createElement("td")
|
|
|
|
|
|
- for (let j = 1; j < 10; j++) {
|
|
|
- let td = document.createElement("td")
|
|
|
- tr.append(td)
|
|
|
- td.innerText = i * j
|
|
|
- td.style.border = "1px solid black"
|
|
|
- td.style.padding = "7px"
|
|
|
+ tr.append(td)
|
|
|
+ if (i === 0 || j === 0) {
|
|
|
+ td.innerText = i + j
|
|
|
+ } else {
|
|
|
+ td.innerText = i * j
|
|
|
}
|
|
|
+ td.style.border = "1px solid black"
|
|
|
+ td.style.padding = "7px"
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
/* Подсветить ячейку */
|
|
|
|
|
|
-let backlight = document.querySelectorAll("td")
|
|
|
+let backlight = table.querySelectorAll("td")
|
|
|
+let row = table.querySelectorAll("tr")
|
|
|
|
|
|
-backlight.forEach(tdOn => tdOn.onmousemove = function() {
|
|
|
- this.style.backgroundColor = "red"
|
|
|
-})
|
|
|
+let activeCellIndex = null;
|
|
|
|
|
|
-backlight.forEach(tdOut => tdOut.onmouseout = function () {
|
|
|
- this.style.backgroundColor = "white"
|
|
|
+backlight.forEach(tdOn => {
|
|
|
+ tdOn.onmousemove = function () {
|
|
|
+ this.style.backgroundColor = "red"
|
|
|
+ activeCellIndex = this.cellIndex;
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
+backlight.forEach(tdOut => {
|
|
|
+ tdOut.onmouseout = function () {
|
|
|
+ this.style.backgroundColor = "white"
|
|
|
+ activeCellIndex = null
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+)
|
|
|
+
|
|
|
/* Подсветить стену и столбец */
|
|
|
|
|
|
+row.forEach(rowOn => rowOn.onmousemove = function () {
|
|
|
+ this.querySelectorAll("td").forEach(elem => elem.style.borderColor = 'red');
|
|
|
+ row.forEach(elem => elem.cells[activeCellIndex].style.borderColor = 'red')
|
|
|
+})
|
|
|
+row.forEach(rowOn => rowOn.onmouseout = function () {
|
|
|
+ table.querySelectorAll("td").forEach(elem => elem.style.borderColor = 'black');
|
|
|
+})
|
|
|
|
|
|
/* Расчет */
|
|
|
|