homework/js07/MultiplytTable3-files/js/main.js

var table = document.createElement("table");

table.setAttribute("cellpadding","15");
table.setAttribute("border", "1");
table.style.borderCollapse = "collapse";
table.style.borderColor = "#ccc";
document.body.appendChild(table);
for (var i = 0; i < 9; i++) {
	table.appendChild(document.createElement("tr"));
	for (var j = 0; j < 9; j++) {
		table.children[i].appendChild(document.createElement("td"));
		table.children[i].children[j].innerHTML = (i + 1) * (j + 1);
		table.children[i].children[j].onmouseover = colorFuncOn;
		table.children[i].children[j].onmouseout = colorFuncOut;
		table.children[i].children[j].setAttribute("name",j)
	}

}

function colorFuncOn(){
    
    var i = this.getAttribute("name");
    for (var j = 0; j < 9; j++) {
    	this.parentNode.parentNode.childNodes[j].childNodes[i].style.backgroundColor= "#ccc";
    }
    for (var k = 0; k < 9; k++) {
    	 this.parentNode.childNodes[k].style.backgroundColor = "#ccc";
    }
}
function colorFuncOut(){
   
    var i = this.getAttribute("name");
    for (var j = 0; j < 9; j++) {
    	this.parentNode.parentNode.childNodes[j].childNodes[i].style.backgroundColor= "#fff";
    }
     for (var k = 0; k < 9; k++) {
    	 this.parentNode.childNodes[k].style.backgroundColor = "#fff";
    }
}