如何使用 jQuery 使表格内的每个单元格都可点击？答案

【问题标题】：How do you make each cell inside of a table clickable using jQuery?如何使用 jQuery 使表格内的每个单元格都可点击？
【发布时间】：2017-03-21 09:39:42
【问题描述】：

我四处寻找，但找不到我的问题的答案。我正在尝试为学校项目创建井字游戏。我使用 HTML 创建了一个包含 3 行和 3 列的表格，并且我正在尝试制作它，以便当我单击每个单元格时会出现一个 x。有什么想法吗？

【问题讨论】：

可以在每个表格单元格上使用JQuery的click()方法see documentation

标签： javascript jquery dom html-table

【解决方案1】：

我会在桌子上放一个 id，然后从那里用 jquery 选择。

HTML：

<table id="ticTac">
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

CSS：

#ticTac tr td {
    border: 1px solid black;
}
#ticTac tr td {
    padding: 20px;
}

Javascript：

$(document).ready( function() {
    $("#ticTac tr td").click(function() {
        $(this).html("x");
    });
});

JS 小提琴：https://jsfiddle.net/opL45vLr/

【讨论】：

【解决方案2】：

使用 jQuery？

$("table td").click(function() {
   $(this).html("x");
});

【讨论】：