|
|
@@ -0,0 +1,71 @@
|
|
|
+"use strict";
|
|
|
+
|
|
|
+let table = document.createElement("table");
|
|
|
+
|
|
|
+for (let i = 0; i <= 9; i++) {
|
|
|
+ let tr = document.createElement("tr");
|
|
|
+ for (let x = 0; x <= 9; x++) {
|
|
|
+ let td = document.createElement("td");
|
|
|
+ td.style = `border: 1px solid grey; padding: 15px; color: black;`;
|
|
|
+ let sum = i * x;
|
|
|
+ if (sum == 0) {
|
|
|
+ sum = i || x
|
|
|
+ }
|
|
|
+ td.innerText = sum
|
|
|
+ tr.append(td);
|
|
|
+ }
|
|
|
+ table.append(tr);
|
|
|
+}
|
|
|
+document.body.append(table);
|
|
|
+
|
|
|
+
|
|
|
+function highlightCell() {
|
|
|
+ let trSome = document.querySelectorAll("tr"),
|
|
|
+ tdSome = document.querySelectorAll("td");
|
|
|
+
|
|
|
+ tdSome.forEach(td => {
|
|
|
+ td.addEventListener("mouseover", (e) => {
|
|
|
+ console.log(e)
|
|
|
+ td.style = `background-color: orange; color: white; padding: 15px; border: 1px solid grey; cursor: pointer`;
|
|
|
+ });
|
|
|
+
|
|
|
+ td.addEventListener("mouseout", (e) => {
|
|
|
+ console.log(e)
|
|
|
+ td.style = ` color: black; padding: 15px; border: 1px solid grey;`;
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
+// highlightCell()
|
|
|
+
|
|
|
+
|
|
|
+function highlightRowColumn() {
|
|
|
+ let trSome = document.querySelectorAll("tr"),
|
|
|
+ tdSome = document.querySelectorAll("td");
|
|
|
+
|
|
|
+ trSome.forEach(item => {
|
|
|
+ item.addEventListener("mouseover", (e) => {
|
|
|
+ let target = e.target,
|
|
|
+ index = target.cellIndex,
|
|
|
+ index2 = target.parentNode.rowIndex;
|
|
|
+
|
|
|
+ trSome[index2].style.backgroundColor = "red";
|
|
|
+ trSome.forEach(items => {
|
|
|
+ items.children[index].style.backgroundColor = 'red';
|
|
|
+
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ item.addEventListener("mouseout", (e) => {
|
|
|
+ let target = e.target,
|
|
|
+ index = target.cellIndex,
|
|
|
+ index2 = target.parentNode.rowIndex;
|
|
|
+ trSome[index2].style.backgroundColor = "white";
|
|
|
+ trSome.forEach(item => {
|
|
|
+ item.children[index].style.backgroundColor = '';
|
|
|
+ })
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
+// highlightRowColumn()
|
|
|
+
|
|
|
+
|
