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

Question

I am writing an online Sudoku game and I want to change the background color of each cell , when the user select a cell. For example when I select a cell that contains "4", each cell with "4" value in it must become red, and after changing selected cell, background of each cell with "4" value changes to the default background(here is white). enter image description here

Note that each <td> </td> represents a cell. and selecting a cell means mouse cursor in that cell.

1. How can I specify which cell is selected by user ? (mouse cursor is inside of it )
2. How can I specify which cell is hovered by user ? (mouse cursor on it )

More info :

The HTML summary of Sudoku table is like this :

<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

You could use click() event to detect selected cell and input event to detect user change inside the input, then use each() to go through all cells and colorize the matched ones, check the example below.

Hope this helps.

---

Snippet Example

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

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>