JavaScript未捕获类型错误：无法设置属性'-1'；未定义的

我正在练习jquery，并试图构建一个非常基本的Tic-Tac-Toe游戏

我想将html表设置为数组形式的网格索引，并根据玩家的点击改变它们的值。目前，我有颜色变化，这取决于轮换工作，但我不断得到这个未捕获的类型错误，引用我的条件语句中的

board[row][col]=x

我的代码：

$(document).ready(function(event) {

    var count = 0;

    var board = [
        [0, 0, 0], 
        [0, 0, 0], 
        [0, 0, 0]
    ];

    var row = $(this).parent().index();
  var col = $(this).index();

    $('td').click(function() {
        // if count is even, player 1 is yellow
        // if count is odd, player 2 is blue
        if (count % 2 === 0) {
            $(this).addClass('yellow');
            count++;
            board[row][col] = 1;
        } else {
            $(this).addClass('blue');
            count++;
            board[row][col] = 2;
        }
    });
});

相关html：

<div id="main_container">
    <h1 id="main_heading" class="heading" >Tic! Tac! Toe!</h1>
    <h2 id="winning"></h2>
    <table>
        <tbody>
            <tr class="box_row" >
                <td id="box_0_0" class="box_cell" data-row="0" data-col="0" data-clicked="0"></td>

                <td id="box_0_1" class="box_cell" data-row="0" data-col="1" data-clicked="0"></td>

                <td id="box_0_2" class="box_cell" data-row="0" data-col="2" data-clicked="0"></td>
            </tr>
            <tr class="box_row">
                <td id="box_1_0" class="box_cell" data-row="1" data-col="0" data-clicked="0"></td>

                <td id="box_1_1" class="box_cell" data-row="1" data-col="1" data-clicked="0"></td>

                <td id="box_1_2" class="box_cell" data-row="1" data-col="2" data-clicked="0"></td>
            </tr>
            <tr class="box_row">
                <td id="box_2_0" class="box_cell" data-row="2" data-col="0" data-clicked="0"></td>

                <td id="box_2_1" class="box_cell" data-row="2" data-col="1" data-clicked="0"></td>

                <td id="box_2_2" class="box_cell" data-row="2" data-col="2" data-clicked="0"></td>
            </tr>
        </tbody>
    </table>
</div>

---

问题是在读取索引值的位置，需要在单击处理程序中读取它

$(document).ready(function (event) {

    var count = 0;

    var board = [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
    ];

    //here this is the document object
    $('td').click(function () {

        //reading index values should be inside the click handler, here `this` refers to the clicked `td` element
        var row = $(this).parent().index();
        var col = $(this).index();


        // if count is even, player 1 is yellow
        // if count is odd, player 2 is blue
        if (count % 2 === 0) {
            $(this).addClass('yellow');
            count++;
            board[row][col] = 1;
        } else {
            $(this).addClass('blue');
            count++;
            board[row][col] = 2;
        }
    });
});

---

还应该使用类似的东西：

td{width:30px；height:30px；background color:#eee；}

@Ultimater我确实有比那里多得多的CSS:）这应该可以在

元素上不设置任何属性。没有一个是完全必要的。啊，我明白了。非常感谢。

$(document).ready(function (event) {

    var count = 0;

    var board = [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
    ];

    //here this is the document object
    $('td').click(function () {

        //reading index values should be inside the click handler, here `this` refers to the clicked `td` element
        var row = $(this).parent().index();
        var col = $(this).index();


        // if count is even, player 1 is yellow
        // if count is odd, player 2 is blue
        if (count % 2 === 0) {
            $(this).addClass('yellow');
            count++;
            board[row][col] = 1;
        } else {
            $(this).addClass('blue');
            count++;
            board[row][col] = 2;
        }
    });
});