在特定的“坐标”处更改单元格的颜色

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（'background-color'，'red'）;

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>