javascript - 处理选项卡按下事件以在可编辑的 html 表中添加动态自定义行

Question

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

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

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

退格键也无法删除表格单元格。

我尝试这个来处理按键:

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

但此事件仅调用在页面加载时创建的表格单元格。

是否有可能在 press 选项卡上使用 css 使光标闪烁？ 我的 ck-editor 版本是 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>

Answer 1

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