配列を2次元配列に連続的に追加する

Question

グリッド内のセルをクリックするたびに、セルの[行、列]の配列がbla（黒色）またはwhi（白色）の変数に記録されます。 。しかし、次にセルをクリックすると、変数が変更されます。例えば、私はセルと変数whiを[1,2]をクリックし、次に別のセルをクリックします。変数blaは[2,2]で、その後、3番目のセルと変数をクリックします[1 、2]（元のクリックから）を[3,2]に変更します。 （私はこのために乱数を作った）。私は、変数blaと変数whiの2つの2D配列を作成したいと思います。私の例では、2次元配列の1つは[[1,2]、[3,2]]（白いセルの場合）、もう1つは[[2,2]（黒いセルの場合））

コード試す：

var white=true; 
 
function generateGrid(rows, cols) { 
 
    var grid = "<table>"; 
 
    for (row = 1; row <= rows; row++) { 
 
     grid += "<tr>"; 
 
     for (col = 1; col <= cols; col++) {  
 
      grid += "<td></td>"; 
 
     } 
 
     grid += "</tr>"; 
 
    } 
 
    return grid; 
 
} 
 

 
$("#tableContainer").append(generateGrid(10, 10)); 
 

 
$("td").click(function() { 
 
    $(this).css('cursor','default'); 
 
    var index = $("td").index(this); 
 
    var row = Math.floor((index)/10) + 1; 
 
    var col = (index % 10) + 1; 
 
    var $td = $(this); 
 
    if ($td.data('clicked')) 
 
     return; 
 
     if (white===true){ 
 
      var whi=[row,col]; //I want to log the array for whi into a 2D array 
 
      console.log("white coord is "+whi); 
 
     } else { 
 
      var bla=[row,col]; //I want to log this array into another 2D array 
 
      console.log("black coord is "+bla); 
 
     } 
 

 
    $td.data('clicked', true); 
 

 
    $td.css('background-color', white ? 'white' : 'black'); 
 
    white = !white; 
 
});

html{ 
 
    background-color:#7189ea; 
 
} 
 
td { 
 
    border: 1px solid; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius:100%; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
}

<link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div id="tableContainer"></div>

Answer 1

初期whiとbla配列として、それらに[row,col]プッシュ - デモ以下を参照：

var white = true; 
 

 
var whi = []; 
 
var bla = []; 
 

 
function generateGrid(rows, cols) { 
 
    var grid = "<table>"; 
 
    for (row = 1; row <= rows; row++) { 
 
    grid += "<tr>"; 
 
    for (col = 1; col <= cols; col++) { 
 
     grid += "<td></td>"; 
 
    } 
 
    grid += "</tr>"; 
 
    } 
 
    return grid; 
 
} 
 

 
$("#tableContainer").append(generateGrid(10, 10)); 
 

 
$("td").click(function() { 
 
    $(this).css('cursor', 'default'); 
 
    var index = $("td").index(this); 
 
    var row = Math.floor((index)/10) + 1; 
 
    var col = (index % 10) + 1; 
 
    var $td = $(this); 
 
    if ($td.data('clicked')) 
 
    return; 
 
    if (white === true) { 
 
    whi.push([row, col]); 
 
    } else { 
 
    bla.push([row, col]); 
 
    } 
 

 
    $td.data('clicked', true); 
 
    $td.css('background-color', white ? 'white' : 'black'); 
 
    white = !white; 
 
}); 
 

 
$('#getarr').click(function(){ 
 
    console.log("white arr: ", whi); 
 
    console.log("black arr: ", bla); 
 
});

html { 
 
    background-color: #7189ea; 
 
} 
 
td { 
 
    border: 1px solid; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 100%; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
}

<link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div id="tableContainer"></div> 
 

 
<button id="getarr">Get array</button>