特定の '座標'でセルの色を変更する

Question

私は[行、列]によって座標でそれぞれラベルされたセルを持つテーブルを持っています。たとえば、最初のセルは[0,0]です。色を変えるためにテーブルの特定の座標が必要です。今すぐクリックして色を変えることができます。

配列に等しい変数が必要です。たとえば[2,2]としましょう。 [2,2]のセルは別の色に変わるはずです。

私がこれまで持っているコード：

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(5, 5)); 
 

 
$("td").click(function() { 
 
    var index = $("td").index(this); 
 
    var row = Math.floor((index)/5) + 1; 
 
    var col = (index % 5) + 1; 
 
    var coord= [row,col] 
 
    $("span").text("Coordinate: " + coord); 
 
    $(this).css('background-color', 'red'); 
 
    //just create a new variable equal to an array. For ex: var place=[2,2] and make the cell at [2,2] turn red. 
 
});

td { 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
td{ 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span>Select a cell!</span> 
 
<div id="tableContainer"></div>

Answer 1

あなたが特定の行列を指定する必要がある場合は、あなたがそうのように、jQueryのEQ（）セレクタを使用することができます。

$（ "tr：eq（2）td：eq（2）"）.css（ '背景色'、 '赤'）;

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(5, 5)); 
 

 
$("tr:eq(2) td:eq(2)").css('background-color', 'red');

td { 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
td{ 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span>Cell [2,2] automatically changed!</span> 
 
<div id="tableContainer"></div>