Question

我有一个Bootstrap HTML表格，我需要检测何时在行级别和单元格级别按下删除键。每个单元格都有一个Id。所有javascript代码都基于ES6类。

我将事件处理程序设置为：

$('#footable').on('keydown',this.onKeyDown.bind(this));

onKeyDown(event){

}

只要在行级别或单元级别按下某个键，就会触发此事件，但是我无法识别它被触发的级别。如果我遍历事件数据，我总是得到行的属性（id，class等，以及整行内部html）。我已经尝试在单元级别使用选择器设置事件处理程序，向每个单元格添加标准类属性Eg 'fooclass'并将事件附加到类但事件处理程序不会被触发：{{1 }}

是否可以通过使用JQUERY的.on方法来区分它？还是其他选择？

Answer 1

这是我说的解决方案。您可以简单地添加第一行，它可以定义行级事件，其他单元格可用于行事件。

只需在行的第一个单元格的输入元素和行中的所有其他单元格上按下删除键时，只需看到区别！

$("#test tr td:first").on("keydown", function(event){
	if(event.which == 46) alert("delete is pressed at row level");
});

$("#test tr td:not(:first)").on("keydown", function(event){
	if(event.which == 46) alert("delete is pressed at cell level");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
  <tr>
    <th>row</th>
    <th>cell</th>
    <th>cell</th>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>

区分HTML表行上的keydown与表格单元格

1 个答案: