到目前为止，这就是我的规则，即我不能对任何东西进行硬编码，不能触摸HTML，并且必须立即附加整个数组以获取结果。我基本上在将8 <td>推到我的8 <tr>时遇到麻烦。谢谢您的帮助。
的JavaScript
var checkerBoard = [];
$(function(){
for(var i = 0; i < 8; i++){
var trOdd = $('<tr>').addClass('odd');
var trEven = $('<tr>').addClass('even');
if(i % 2 !== 0){ checkerBoard.push(trEven); }
else { checkerBoard.push(trOdd); }
for(var j = 0; j < checkerBoard.length; j++){
checkerBoard[j].append('<td>');
}
}
$('tbody').append(checkerBoard);
$( ".odd td:odd" ).css( "background-color", "white" );
$( ".odd td:even" ).css( "background-color", "black" );
$( ".even td:odd" ).css( "background-color", "black" );
$( ".even td:even" ).css( "background-color", "white" );
$('#gameBoard').css({
'border-collapse' : 'collapse',
'border' : 'solid 1px black'
});
$('td').css({
'width' : '30px',
'height' : '30px'
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1> Game Board </h1>
<table id="gameBoard">
<tbody></tbody>
</table>
</body>最佳答案
您还需要每行8个单元格...在第一个循环内运行时，这些单元格与棋盘阵列长度无关，因为棋盘阵列长度尚未完成
变化：
for(var j = 0; j < checkerBoard.length; j++){
checkerBoard[j].append('<td>');
}
至
for(var j = 0; j < 8; j++){
checkerBoard[i].append('<td>');
}
还要注意，您使用脚本添加的所有样式都可以在没有脚本的css中轻松完成
var checkerBoard = [];
$(function(){
for(var i = 0; i < 8; i++){
var trOdd = $('<tr>').addClass('odd');
var trEven = $('<tr>').addClass('even');
if(i % 2 !== 0){ checkerBoard.push(trEven); }
else { checkerBoard.push(trOdd); }
for(var j = 0; j < 8; j++){
checkerBoard[i].append('<td>');
}
}
$('tbody').append(checkerBoard);
$( ".odd td:odd" ).css( "background-color", "white" );
$( ".odd td:even" ).css( "background-color", "black" );
$( ".even td:odd" ).css( "background-color", "black" );
$( ".even td:even" ).css( "background-color", "white" );
$('#gameBoard').css({
'border-collapse' : 'collapse',
'border' : 'solid 1px black'
});
$('td').css({
'width' : '30px',
'height' : '30px'
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1> Game Board </h1>
<table id="gameBoard">
<tbody></tbody>
</table>
</body>关于javascript - 如何使用jQuery动态创建棋盘，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34868705/