maryluis
/
homeworks_Second_modul


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!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>