Detect TD editable change and change css colour

Question

this seems pretty simple but I cannot figure out a solution for it.

I have an HTML table such as

$('#result_table td').on('change', function() {
  console.log("Row Changed!")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="result_table" class="table table-hover">
  <thead>
    <tr>
      <th>Blah</th>
      <th>Error</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bleh</td>
      <td>False</td>
    </tr>
    <!-- If Error, make it editable but highlight row red-->
    <tr bgcolor="#FF9494">
      <td contenteditable="true">blah_error</td>
      <td contenteditable="true">True</td>
    </tr>
  </tbody>
</table>

What I am trying to do is if you click and edit the editable content, change the table row background colour to a different colour. I'm just stuck with trying to figure out the jQuery.

What have you tried so far? You didn't show your JavaScript code. — Quentin Veron, Feb 12 '19 at 19:48
@QuentinVeron I haven't tried much because I'm not perfect at jQuery, though I've tried the easily searchable answers. Just couldn't find something similar to what I'm trying to accomplish, hence I thought leaving out any jQuery code would be more appropriate. — Nom, Feb 12 '19 at 19:50

score 0 · Accepted Answer · answered Feb 12 '19 at 19:53

use the blur event on the td, as soon as you leave the cell it will trigger your event

$('#result_table td').on('blur', function() {
  console.log("Row Changed!")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="result_table" class="table table-hover">
  <thead>
    <tr>
      <th>Blah</th>
      <th>Error</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bleh</td>
      <td>False</td>
    </tr>
    <!-- If Error, make it editable but highlight row red-->
    <tr bgcolor="#FF9494">
      <td contenteditable="true">blah_error</td>
      <td contenteditable="true">True</td>
    </tr>
  </tbody>
</table>

Detect TD editable change and change css colour

1 Answers1