javascript - jQuery checkerBoard 调整棋盘尺寸

Question

我正在尝试创建一个 jQuery CheckerBoard，到目前为止我已经有了这么多，一切似乎都工作正常，但是我输入的所有内容都是新数字，它会附加到现有的棋盘上，如何编辑我的代码以便每次我在输入框中输入一个新数字时，棋盘都会更改为该大小并且不会附加到它上面，这是我到目前为止所得到的，我被告知有两个原因导致它不断增长首先不是重置，而是 var checkerBoard = [];存储在全局范围内，它将更多的棋盘格放入数组中，并且要覆盖以前的内容，我需要使用 .html()，但不应该确定应该如何完成，请帮助

HTML

游戏板

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

Javascript

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

Answer 1

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

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

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