jQuery TD获得焦点时激活函数

Question

我制作了一个 editable table，它在我的用户单击 table 单元格时运行良好。但是，当用户切换到 table 单元格（无需单击鼠标）时，我需要相同的功能。这是相关的 jQuery:

$('.cd_editable').on('click', 'td', function () { 
    //do stuff
});

这在用户单击 table 单元格时效果很好。有什么方法可以改变这一行，以便当我的用户在那里点击时它会触发吗？所有 editable TD 都有 tabindex 编号，因此制表符有效。

感谢您的帮助。

Answer 1

使用焦点事件。

$("table tbody").on("focus", "td", function () {
  console.log(this)
})

td {
  width: 50px;
  border: 1px dashed black;
}

td:focus {
  background-color: #CCC
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
    </tr>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
    </tr>
  </tbody>
</table>

jQuery TD获得焦点时激活函数

jQuery activate function when TD gets focus

jquery

html-table

tabindex

tablecell