javascript - 检测 TD 可编辑更改并更改 css 颜色

Question

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

我有一个 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。

标签： javascriptjqueryhtmlhtml-table

Answer 1

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

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