#table{
margin: auto;
}
td {
background-color: #9A9A9A;
}
.td1 {
background-color: #FFFFFF;
}
#show {
margin: auto;
border: 1px solid aqua;
height: 100px;
width: 300px;
line-height: 100px;
font-size: 40px;
font-weight: bold;
text-align: center;
color: coral;
background-color: #00FFFF;
font-family: "微软雅黑";
display: none;
}
var table = document.getElementById("table");
var num = 3
var tds;
creatTable();
function creatTable() {
table.innerHTML = "";
for(var i = 0; i < num; i++) {
var row = table.insertRow();
for(var k = 0; k < num; k++) {
row.insertCell();
}
tds = table.getElementsByTagName("td");
}
for(var i = 0; i < tds.length; i++) {
tds[i].onclick = function() {
var rowindex = this.parentNode.rowIndex;
var cellindex = this.cellIndex;
for(var i = 0; i < tds.length; i++) {
if(tds[i].parentNode.rowIndex == rowindex || tds[i].cellIndex == cellindex) {
if(tds[i].className) {
tds[i].className = "";
} else {
tds[i].className = "td1";
}
}
}
getFullTable();
}
}
}
function getFullTable() {
var ischenggong = true;
for(var i = 0; i < tds.length; i++) {
if(tds[i].className == "") {
ischenggong = false;
break;
}
}
if(ischenggong) {
document.getElementById("show").style.display = "block";
setTimeout(function() {
num++;
creatTable();
document.getElementById("show").style.display = "none";
}, 2000)
}
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史