Marko
/
Homework.6


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A-Level</title>
    <style>      
    .table{
        border: 1px solid black;
        text-align: center;
    }
    .td{
        border: 1px solid rgb(0, 13, 128);
        text-align: center;
        padding: 10px;
    }
</style>
</head>
<body>    
<script>    
var multTable = [];
let table = document.createElement("table")
  document.body.append(table);
         for (let i = 1; i < 10; i++) {
            multTable[i] = []
           var tr = document.createElement("tr")
           for (let j = 1; j < 10; j++) {
            multTable[i][j] = i * j
             var td = document.createElement("td");
             tr.appendChild(td);
              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>