检测颜色和坐标＆＃39;网格中的单元格

Question

我想检测单元格是黑色还是白色还是未在特定的坐标处更改。要把它放在代码中，它应该像是，如果单元格是白色，则返回单元格[row] [col] = 1，如果单元格是黑色，则单元格[row] [col] = 0。每个单元格应该以单元格[row] [col] = 2开始，因为它既不是黑色也不是白色。每次单击它时，它都会变为1或0。

到目前为止我的代码：

JS＆amp; jQuery的：

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

$( "td" ).click(function() {
    if ($(this).hasClass('played')) {
      return;
    }
    $(this).addClass('played');

    var index = $( "td" ).index( this );
    var row = Math.floor( ( index ) / 5) + 1;
    var col = ( index % 5 ) + 1;
    if (white==true){
       $( this ).css( 'background-color', 'white' );
       white=false
    }
    else if (white==false){
       $( this ).css( 'background-color', 'black' );
       white=true;
    }
});

CSS：

html{
    background-color:#E2F8FA;
}
td {
    border: 1px solid;
    width: 25px;
    height: 25px;
}

table {
    border-collapse: collapse;
}

HTML：

<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>