javascript - 如何从用户输入的可编辑 <td> 中获取文本？

Question

我正在尝试在这里制作一款游戏，到目前为止我仍然处于这款游戏的 10% 水平。这叫“SOS”熟悉吗？就像井字游戏，但不是 5x5 中的“X”和“O”，而是“S”和“O”，并且将使用 javascript。现在我有一个可编辑的TD了

<table id="myTable" border="1" style="border-collapse: collapse; width:30%;" cellpadding="8">
                    <!-- 1st row -->
                    <tr>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                    </tr>
                    <!-- 2nd row -->
                    <tr>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                    </tr>
                    <!-- 3rd row -->
                    <tr>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                    </tr>
                    <!-- 4th row -->
                    <tr>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                    </tr>
                    <!-- 5th row -->
                    <tr>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                    </tr>

                </table>

如果我要在这个 td 中输入文本，我怎样才能让它与其他 td 进行比较？因为要在这个游戏中得分，我必须垂直、对 Angular 和水平地形成 SOS 这个词。请帮忙:) 谢谢Javascripters:)

example: consider this are td's. the 1st player inputs "S". The second player inputs "0". Then the 1st player again inputs "S". Then that's a score for player 1.

[S][O][S][ ][ ]
[ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ]

Answer 1

在每个 td 上使用 data-x 和 data-y 属性，例如

<td data-x="0" data-y="0"> X/O </td>
<td data-x="0" data-y="1"> X/O </td>
...
...
<td data-x="4" data-y="4"> X/O </td>

现在，您可以访问给定 i 和 j 处的值

$('td[data-x="' + i + '"][data-y="' + j + '"]').text()

而且我认为没有必要使用contenteditable=true

$ - jQuery

如果您不使用 jQuery 或使用纯 Javascript，那么让我们执行以下操作:

<td id="x0y0"> X/O </td>
<td id="x0y1"> X/O </td>
...
...    
<td id="x4y4"> X/O </td>

然后您可以访问 i 和 j 处的值

document.getElementById('x'+i+'y'+j).value