CODEWITHSUNDEEP
javascriptjqueryhtml
Mohammad Mahdi KouchakYazdi
Mohammad Mahdi KouchakYazdi

Reputation: 1386

How to specifiy a selected contenteditable tag using jQuery?

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>

Upvotes: 1

Views: 846

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 2

Rayon
Rayon

Reputation: 36609

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>

Upvotes: 2

Related Questions