TD获得焦点时,jQuery激活功能

问题描述 投票:0回答:1

我制作了一个可编辑的表格,当用户单击表格单元格时,该表格可以很好地工作。但是,当用户切换到表格单元时(没有鼠标单击),我需要相同的功能。这是相关的jQuery:

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

当用户单击表格单元格时,这非常有用。有什么方法可以更改此行,以便当我的用户在此处单击时触发该行?所有可编辑的TD都有tabindex编号,因此制表符有效。

感谢您的帮助。

jquery html-table tabindex tablecell
1个回答
2
投票

使用焦点事件。

$("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>
© www.soinside.com 2019 - 2024. All rights reserved.