<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table2</title>
</head>
<body>
<script>
function matrixTable() {
var table = [];
let tableInner = document.createElement("table")
tableInner.setAttribute("border", "2")
for(let i = 0; i < 10; i++) {
var newrow = document.createElement("tr");
table[i] = [];
for(let j = 0; j < 10; j++){
var newtd = document.createElement("td");
newtd.onmouseover = function(){
let coulum = document.getElementsByTagName("TD")
for (let key of coulum){
if (key.cellIndex == this.cellIndex){
key.style = "background-color: #c4c0c0; border: 2px solid black; "
}
}
this.parentElement.style = "background-color: #c4c0c0;"
}
newtd.onmouseout = function(){
this.parentElement.style = "background-color: none; border: 2px solid black"
let coulum = document.getElementsByTagName("TD")
for (let key of coulum){
if (key.cellIndex == this.cellIndex){
key.style = "background-color: none; border: 2px solid black; width: 15px; height: 15px;"
}
}
}
newtd.style = "border: 2px solid black; width: 15px; height: 15px;"
newtd.innerHTML = ((i) * j)
let oneTd = newtd
newrow.appendChild(oneTd)
tableInner.appendChild(newrow)
}
document.body.appendChild(tableInner)
}
}
matrixTable()</script>
</body>
</html>