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。

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>

检测TD可编辑的更改并更改CSS颜色

1 个答案: