检测TD可编辑更改并更改css颜色[重复]答案

【问题标题】：Detect TD editable change and change css colour [duplicate]检测TD可编辑更改并更改css颜色[重复]
【发布时间】：2019-02-13 03:56:02
【问题描述】：

这看起来很简单，但我无法找到解决方案。

我有一个 HTML 表格，例如

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

我想要做的是，如果您单击并编辑可编辑内容，请将表格行背景颜色更改为其他颜色。我只是想弄清楚 jQuery。

【问题讨论】：

到目前为止你尝试过什么？您没有显示您的 JavaScript 代码。
@QuentinVeron 我没有尝试太多，因为我在 jQuery 方面并不完美，尽管我尝试了易于搜索的答案。只是找不到类似于我想要完成的东西，因此我认为省略任何 jQuery 代码会更合适。
改用on('input'

标签： javascript jquery html html-table

【解决方案1】：

在td 上使用blur 事件，一旦您离开单元格，它将触发您的事件

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

【讨论】：