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

Question

我正在写在线数独游戏，当用户选择一个单元格时，我想更改每个单元格的背景颜色。 例如，当我选择一个包含“ 4”的单元格时，其中每个具有“ 4”值的单元格必须变为红色，并且在更改所选单元格后，每个具有“ 4”值的单元格的背景将更改为默认背景（此处为白色）。 在此处输入图片说明

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

1. 如何指定用户选择的单元格？ （鼠标光标在其中）
2. 如何指定用户将鼠标悬停在哪个单元格上？ （将鼠标光标放在上面）

更多信息 ：

Sudoku表的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

您可以使用click()事件检测选定的单元格，并使用input事件检测输入内部的用户更改，然后使用each()遍历所有单元格并为匹配的单元格上色，请查看下面的示例。

希望这可以帮助。

---

片段示例

 $('table').on('click input','td',function(){ var clicked_td_text = $(this).text(); $('td').each(function(){ if( clicked_td_text!='' && $(this).text()==clicked_td_text ) $(this).addClass('red'); else $(this).removeClass('red'); }) }) 

 .red{ background-color: red !important; } table td{ width: 15px; text-align: center; } table td[contenteditable="false"]{ background-color: #E8F7E6; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border=1> <tr> <td contenteditable="true"></td> <td contenteditable="false">2</td> <td contenteditable="false">3</td> <td contenteditable="false">5</td> <td contenteditable="true"></td> <td contenteditable="false">7</td> </tr> <tr> <td contenteditable="false">1</td> <td contenteditable="true"></td> <td contenteditable="false">5</td> <td contenteditable="false">2</td> <td contenteditable="true"></td> <td contenteditable="false">3</td> </tr> <tr> <td contenteditable="false">4</td> <td contenteditable="true"></td> <td contenteditable="false">6</td> <td contenteditable="true"></td> <td contenteditable="false">7</td> <td contenteditable="true"></td> </tr> <tr> <td contenteditable="false">4</td> <td contenteditable="true"></td> <td contenteditable="true"></td> <td contenteditable="false">1</td> <td contenteditable="true"></td> <td contenteditable="false">5</td> </tr> <tr> <td contenteditable="true"></td> <td contenteditable="false">2</td> <td contenteditable="false">1</td> <td contenteditable="false">3</td> <td contenteditable="true"></td> <td contenteditable="false">8</td> </tr> <tr> <td contenteditable="false">5</td> <td contenteditable="true"></td> <td contenteditable="false">7</td> <td contenteditable="false">4</td> <td contenteditable="true"></td> <td contenteditable="false">6</td> </tr> <table> 

Answer 2

使用focus和blur事件

 $('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>