javascript - jQuery checkerBoard板大小

我正在尝试创建一个jQuery CheckerBoard，到目前为止，我看来一切正常，但是我输入的所有数字都新，它将附加到现有的棋盘上，如何编辑代码，以便每次输入时在输入框中输入一个新数字，电路板会更改为该尺寸，并且不会附加在上面，这就是我到目前为止所得到的，我被告知这有两个原因，即该数字一直在增长而不是重置，首先是var checkerBoard = [];存储在全局范围内，它将更多的检查方块推入数组，并且要覆盖以前的内容，我需要使用.html（），尽管不确定应该如何做，请帮助

的HTML
        
      游戏板
    
    
    

<table id="gameBoard">
<tbody></tbody>
</table>

Java脚本

var checkerBoard = [];
$(document).ready(function(){
var function1 = function(calcs){

for(var i = 0; i < calcs; i++){

var trOdd = $('<tr>').addClass('odd');
var trEven = $('<tr>').addClass('even');

if(calcs % 2 !== 0 && i % 2 !== 0){ checkerBoard.push(trOdd); }
else if(calcs % 2 !== 0 && i % 2 === 0) { checkerBoard.push(trOdd); }
else if(calcs % 2 === 0 && i % 2 !== 0){ checkerBoard.push(trEven); }
else{ checkerBoard.push(trOdd); }

for(var j = 0; j < calcs; j++){
  checkerBoard[i].append('<td>');
}
}
 $('tbody').append(checkerBoard);
 $( ".odd td:odd" ).css( "background-color", "red" );
 $( ".odd td:even" ).css( "background-color", "black" );
 $( ".even td:odd" ).css( "background-color", "black" );
 $( ".even td:even" ).css( "background-color", "red" );

 $('#gameBoard').css({
'border-collapse' : 'collapse',
'border' : 'solid 1px black'
  });
  $('td').css({
 'width'  : '30px',
'height' : '30px'
 });
}

$("[name=INPUT1]").change(function(){
var calc = $(this).val();
$("[name=OUTPUT1]").val(calc);
console.log(calc);
function1(calc);
});
});

最佳答案

您需要将checkerboard = [];添加为function1定义内的第一行，并将$('tbody').append(checkerBoard);更改为$('tbody').empty().append(checkerBoard);。尽管我建议尽可能将棋盘格变量移动到函数中，以便每次调用function1时都会重新创建该变量，而不是必须清除的全局变量。

您需要重置棋盘格变量的原因是因为当前使用的是checkerboard.push()，它将把新的tr附加到数组的末尾并添加到数组的末尾，以便您拥有所有原始行以及要添加的新行。 。

您需要调用.empty()的原因与上述基本相同。 .append()在现有行之后添加新行。调用.empty()将在添加新行之前删除现有行。