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"; } }