jQuery checkerBoard Größe

Question

Ich versuche ein jQuery CheckerBoard zu erstellen, ich habe so viel bisher, alles scheint gut zu funktionieren, aber alles, was ich eine neue Nummer eingeben, hängt es an das vorhandene Schachbrett, wie ich bearbeite Mein Code, so dass jedes Mal, wenn ich eine neue Nummer in das Eingabefeld eingibt, die Platine auf diese Größe ändert und nicht daran anfügt, hier ist, was ich bisher bekommen habe, mir wurde gesagt, dass es zwei Gründe dafür gibt dass es wächst anstatt zu resetten, zuerst ist das var checkerBoard = []; ist auf dem globalen Bereich gespeichert, schiebt mehr Checker Quadrate in das Array, und dass, um den vorherigen Inhalt zu überschreiben, muss ich .html(), obwohl nicht sicher, wie es getan werden sollte, bitte helfen HTML

Spielbrett

<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

Sie müssen checkerboard = []; als die erste Zeile innerhalb Ihrer Definition von function1 hinzufügen und $('tbody').append(checkerBoard); zu $('tbody').empty().append(checkerBoard); ändern. Obwohl ich empfehlen würde, die Schachbrettvariable möglichst in die Funktion zu verschieben, so dass die Variable jedes Mal neu erstellt wird, wenn function1 aufgerufen wird, anstatt eine globale Variable zu sein, die Sie löschen müssen.

Der Grund, warum Sie Ihre Schachbrett-Variable zurücksetzen müssen, ist, weil Sie derzeit checkerboard.push() verwenden, die den neuen tr an das Ende des Arrays anhängen und so machen Sie Sie alle Ihre ursprünglichen Zeilen plus die neuen Sie haben fügen hinzu.

Der Grund, warum Sie anrufen müssen .empty() ist im Wesentlichen das gleiche wie oben. .append() fügt die neuen Zeilen nach den vorhandenen Zeilen hinzu. Durch den Aufruf von .empty() werden die vorhandenen Zeilen vor dem Hinzufügen der neuen Zeilen entfernt.