계속 배열을 2D 배열에 추가합니다.

Question

격자에서 셀을 클릭 할 때마다 셀의 [행, 열] 배열을 bla (검정) 또는 whi (흰색) 변수에 기록합니다. . 그러나 다음 번에 셀을 클릭하면 변수가 변경됩니다. 예를 들어 셀과 변수 whi [1,2]를 클릭 한 다음 다른 셀을 클릭하면 변수 bla는 [2,2]이고 그 다음에 세 번째 셀과 변수 whi가 [1 , 2] (원래 클릭에서) [3,2]로 변경됩니다. (나는 이것을 위해 난수를 만들었다). 나는 변수 bla와 변수 whi를위한 두개의 2D 배열을 만들고 싶다. 예제를 사용하여 2D 배열 중 하나는 [[1,2], [3,2]] (흰색 셀)이고 다른 하나는 [[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>

,210