Question

这就是我到目前为止规则是我无法对任何东西进行硬编码，我无法触摸HTML，我必须立即追加整个数组以获得结果。我基本上无法将8 <td>推送到我的<tr>。谢谢你的帮助。

的JavaScript

＆＃13;

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'
  });

});

＆＃13;

<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>

＆＃13;

Answer 1

你每行也需要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中轻松完成

＆＃13;

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'
  });

});

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用简单数组连接来生成html内容

＆＃13;

var checkerBoard = [];
$(function() {

  var row = new Array(9).join('<td></td>');
  var body = new Array(9).join('<tr>' + row + '</tr>');
  var $tbody = $('#gameBoard tbody').html(body);

  $tbody.find('tr:odd').addClass('odd');
  $tbody.find('tr:even').addClass('even');

  $tbody.find('tr:odd td:odd').addClass('white');
  $tbody.find('tr:odd td:even').addClass('black');
  $tbody.find('tr:even td:odd').addClass('black');
  $tbody.find('tr:even td:even').addClass('white');


  $('#gameBoard').css({
    'border-collapse': 'collapse',
    'border': 'solid 1px black'
  });

  $('td').css({
    'width': '30px',
    'height': '30px'
  });

});

＆＃13;

.black {
  background-color: black;
}
.white {
  background-color: white;
}

＆＃13;

<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>

＆＃13;

但你也可以使用简单的css解决方案，比如

＆＃13;

$(function() {

  var row = new Array(9).join('<td></td>');
  var body = new Array(9).join('<tr>' + row + '</tr>');
  $('#gameBoard tbody').html(body);

});

＆＃13;

#gameBoard {
  border-collapse: collapse;
  border: solid 1px black;
}
#gameBoard td {
  width: 30px;
  height: 30px;
}
#gameBoard tbody tr:nth-child(2n) td:nth-child(2n) {
  background-color: black;
}
#gameBoard tbody tr:nth-child(2n+1) td:nth-child(2n +1) {
  background-color: black;
}

＆＃13;

<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>

＆＃13;

如何使用jQuery动态创建棋盘格

2 个答案: