javascript - 如何使用 jQuery 指定选定的 contenteditable 标签？

Question

我正在编写一个在线数独游戏，我想在用户选择一个单元格时更改每个单元格的背景颜色。例如，当我选择一个包含“4”的单元格时，其中每个具有“4”值的单元格必须变为红色，并且在更改所选单元格后，每个具有“4”值的单元格的背景更改为默认背景(这里是白色). enter image description here

注意每个<td> </td>代表一个细胞。选择一个单元格意味着鼠标光标在该单元格中。

1. 如何指定用户选择了哪个单元格？ (鼠标光标是 在里面)
2. 如何指定用户悬停在哪个单元格上？ (鼠标光标在 它)

更多信息:

数独表的 HTML 摘要是这样的:

<table>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="false">2</td>
      <td contenteditable="false">3</td>
    </tr>
    <tr>
      <td contenteditable="false">4</td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
    </tr>
<table>

Answer 1

Use focus and blur events

$('table').on('focus input', 'td[contenteditable]', function() {
  $('td[contenteditable]').css('background-color', '');
  var val = this.textContent;
  if (val) {
    $('td[contenteditable]:contains(' + val + ')').css('background-color', 'red');
  }
});
$('table').on('blur', '[contenteditable]', function() {
  $('td[contenteditable]').css('background-color', '');
});

table,
td {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td contenteditable="true"></td>
    <td contenteditable="false">2</td>
    <td contenteditable="false">3</td>
  </tr>
  <tr>
    <td contenteditable="false">4</td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
  </tr>
</table>