|
@@ -0,0 +1,36 @@
|
|
|
|
+<head>DOM cross</head>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+<body>
|
|
|
|
+ <script>
|
|
|
|
+ let table = document.createElement("table");
|
|
|
|
+ for (let i = 1; i <= 9; i++) {
|
|
|
|
+ let row = document.createElement("tr");
|
|
|
|
+ table.append(row);
|
|
|
|
+ for (let j = 1; j <= 9; j++) {
|
|
|
|
+ let column = document.createElement("td");
|
|
|
|
+ column.innerText = i * j;
|
|
|
|
+ row.append(column);
|
|
|
|
+ column.onmouseover = () => {
|
|
|
|
+ for (let k = 0; k < 9; k++) {
|
|
|
|
+ table.rows[i - 1].cells[k].style.backgroundColor = "lightgrey";
|
|
|
|
+ }
|
|
|
|
+ for (let k = 0; k < 9; k++) {
|
|
|
|
+ table.rows[k].cells[j - 1].style.backgroundColor = "lightgrey";
|
|
|
|
+ }
|
|
|
|
+ column.style.backgroundColor = "grey";
|
|
|
|
+ }
|
|
|
|
+ column.onmouseout = () => {
|
|
|
|
+ for (let k = 0; k < 9; k++) {
|
|
|
|
+ table.rows[i - 1].cells[k].style.backgroundColor = "white";
|
|
|
|
+ }
|
|
|
|
+ for (let k = 0; k < 9; k++) {
|
|
|
|
+ table.rows[k].cells[j - 1].style.backgroundColor = "white";
|
|
|
|
+ }
|
|
|
|
+ column.style.backgroundColor = "white";
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ document.body.append(table);
|
|
|
|
+ </script>
|
|
|
|
+</body>
|