|
|
@@ -11,34 +11,43 @@
|
|
|
text-align: center;
|
|
|
}
|
|
|
.td{
|
|
|
- border: 1px solid green
|
|
|
- ;
|
|
|
+ border: 1px solid rgb(0, 13, 128);
|
|
|
text-align: center;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
-<body>
|
|
|
+<body>
|
|
|
<script>
|
|
|
-let table = document.createElement("table");
|
|
|
+var multTable = [];
|
|
|
+let table = document.createElement("table")
|
|
|
document.body.append(table);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
for (let i = 1; i < 10; i++) {
|
|
|
- let tr = document.createElement("tr");
|
|
|
- table.appendChild(tr);
|
|
|
+ multTable[i] = []
|
|
|
+ var tr = document.createElement("tr")
|
|
|
for (let j = 1; j < 10; j++) {
|
|
|
- let td = document.createElement("td");
|
|
|
+ multTable[i][j] = i * j
|
|
|
+ var td = document.createElement("td");
|
|
|
tr.appendChild(td);
|
|
|
- td.innerText = i * j;
|
|
|
+ td.innerHTML = multTable[i][j];
|
|
|
table.className = 'table'
|
|
|
td.className = 'td'
|
|
|
|
|
|
|
|
|
}
|
|
|
+ table.appendChild(tr)
|
|
|
}
|
|
|
|
|
|
+let tdArr = [...table.querySelectorAll('td')];
|
|
|
+
|
|
|
+tdArr.forEach(tdOn => tdOn.onmouseover = function(){
|
|
|
+ this.style.backgroundColor = "blue"
|
|
|
+ this.parentElement.style.backgroundColor = "grey"
|
|
|
+ })
|
|
|
+tdArr.forEach(tdOn => tdOn.onmouseout = function(){
|
|
|
+ this.style.backgroundColor = "transparent"
|
|
|
+ this.parentElement.style.backgroundColor = "transparent"
|
|
|
+})
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
Marko