处理tab press事件，在可编辑的html表中添加动态自定义行

handle on tab press event to add dynamic customize row in editable html table

本文关键字：html 添加 动态 自定义 编辑 press tab 事件 处理      更新时间：2023-09-26

我刚刚创建了一个可编辑的表，它的默认行为是在最后一个表单元格上按tab键，然后在表的最后添加新行。

我想在动态行上处理这个事件按键。

另一个问题是选项卡上的光标在新的表格单元格上不闪烁，当我键入其他内容时，它可以工作。

并且退格不起作用以删除表单元格。

我试着把钥匙放下：

$(".table_desc tr").on('keydown', 'td', function(e) { 
    console.log("call keydown");
}

但是该事件只调用在页面加载时创建的那个表单元格。

有可能在按下选项卡上使用css来闪烁光标吗？我的ck编辑器版本是4.3.2。

我认为在最新版本中，这个问题已经解决，但我希望在4.3.2版本中使用代码来处理这个问题。

$(document).ready(function() {
  $("body").on('keyup', '.table_desc tr td', function(e) {
    console.log("call keydown");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table_desc" border="1" contenteditable="true">
  <tr>
    <td>demo1</td>
    <td>demo1</td>
    <td>demo1</td>
  </tr>
  <tr>
    <td>demo1</td>
    <td>demo1</td>
    <td>demo1</td>
  </tr>
</table>

$(document).ready(function() {
  $("body").on('keyup', '.table_desc tr td', function(e) {
    console.log("call keydown");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table_desc" border="1" contenteditable="true">
  <tr>
    <td>demo1</td>
    <td>demo1</td>
    <td>demo1</td>
  </tr>
  <tr>
    <td>demo1</td>
    <td>demo1</td>
    <td>demo1</td>
  </tr>
</table>

相关文章：