Javascript jQuery棋盘格板尺寸

我正在尝试创建一个jQuery棋盘，到目前为止，我有这么多，一切似乎都很好，但我输入的每一个新数字都会附加到现有的棋盘上，如何编辑我的代码，以便每次我在输入框中输入一个新数字时，棋盘都会更改为该大小，而不会附加到它上，到目前为止，我得到的是，我被告知有两个原因导致它不断增长而不是重新设置，第一个原因是var Checkboard=[]；存储在全局作用域中，它会将更多的棋盘格放入数组中，要覆盖以前的内容，我需要使用.html（），但不确定该如何操作，请提供帮助

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

HTML 游戏板

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

Javascript

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

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

var棋盘=[]；
$（文档）.ready（函数（）{
变量函数1=函数（计算）{
对于（变量i=0；i

您需要添加

棋盘=[]

作为function1定义中的第一行，并更改

$（'tbody'）。追加（棋盘）

到

$（'tbody'）.empty（）.append（棋盘格）。尽管我建议将棋盘变量移动到函数中，如果可能的话，这样每次调用
function1
时都会重新创建该变量，而不是必须清除的全局变量

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

需要重置checkboard变量的原因是，当前正在使用
checkboard.push（）
，这将把新的tr追加到数组的末尾，使其成为所有原始行加上正在添加的新行

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

您需要调用
.empty（）
的原因与上述基本相同
.append（）
在现有行之后添加新行。调用
.empty（）
将在添加新行之前删除现有行
 您需要添加
checkboard=[]
作为function1定义中的第一行，并更改
$（'tbody'）。追加（棋盘）
到
$（'tbody'）.empty（）.append（棋盘格）。尽管我建议将棋盘变量移动到函数中，如果可能的话，这样每次调用
function1
时都会重新创建该变量，而不是必须清除的全局变量

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

需要重置checkboard变量的原因是，当前正在使用
checkboard.push（）
，这将把新的tr追加到数组的末尾，使其成为所有原始行加上正在添加的新行

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

您需要调用
.empty（）
的原因与上述基本相同
.append（）
在现有行之后添加新行。调用
.empty（）
将在添加新行之前删除现有行
 我开始做棋盘=[]；函数中的本地值，但添加.empty（）不会影响结果，当我输入一个新数字并按enter键时，它会继续附加到该数字上。我需要把它放在输入4的地方，得到一个4号的棋盘，然后删除4号，输入2号，得到一个2号的棋盘，这里有一个到jsfiddle@Alamin Hossain的链接-根据我自己对你的jsfiddle的测试，只需移动行
var checkboard=[]函数1的内部使其工作。@AlaminHossain当我对您的JSFIDLE进行我建议的更改时，它工作正常。现在，我想知道如何将游戏块打印到它们的起始位置？我开始制作棋盘=[]；函数中的本地值，但添加.empty（）不会影响结果，当我输入一个新数字并按enter键时，它会继续附加到该数字上。我需要把它放在输入4的地方，得到一个4号的棋盘，然后删除4号，输入2号，得到一个2号的棋盘，这里有一个到jsfiddle@Alamin Hossain的链接-根据我自己对你的jsfiddle的测试，只需移动行
var checkboard=[]函数1的内部使其工作。@AlaminHossain当我对您的JSFIDLE进行我建议的更改时，它工作正常。现在，我想知道如何将游戏块打印到它们的起始位置？
<table id="gameBoard">
<tbody></tbody>
</table>