|
@@ -0,0 +1,39 @@
|
|
|
+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";
|
|
|
+ }
|
|
|
+}
|