我自己寫了一個函數(shù),用來創(chuàng)建多行多列的表格,但是寫完發(fā)現(xiàn)只能創(chuàng)建一行多列。
<p id="game-box"></p>
<script>
var Tab=createGrids(16,10);
var gameBox=document.getElementById("game-box");
gameBox.appendChild(Tab);
// 創(chuàng)建網(wǎng)格
function createGrids(row,col) {
var Tab=document.createElement("table");
var Tbody=document.createElement("tbody");
var i=0,j=0;
while(i<row) {
var Tr=document.createElement("tr");
while(j<col) {
var Td=document.createElement("td");
Tr.appendChild(Td);
j++;
}
Tbody.appendChild(Tr);
i++;
}
Tab.appendChild(Tbody);
return Tab;
}
</script>
因?yàn)槟愕谝槐檫\(yùn)行 while(i<row)
的結(jié)束時候 while(j<col)
中的 j 已經(jīng)是10了哦,所以,第二遍循環(huán) i以后,創(chuàng)建的tr里面都是沒有 td 的,因?yàn)闆]有走進(jìn)while(j<col)
嘛,
你可以改成這樣子
<p id="game-box"></p>
<script>
var Tab=createGrids(16,10);
var gameBox=document.getElementById("game-box");
gameBox.appendChild(Tab);
// 創(chuàng)建網(wǎng)格
function createGrids(row,col) {
var Tab=document.createElement("table");
var Tbody=document.createElement("tbody");
var i=0;
while(i<row) {
var Tr=document.createElement("tr");
var j=0;
while(j<col) {
var Td=document.createElement("td");
Tr.appendChild(Td);
j++;
}
Tbody.appendChild(Tr);
i++;
}
Tab.appendChild(Tbody);
return Tab;
}
</script>
應(yīng)該就可以了