Question

我有一个可在屏幕上编辑的长表（10,000行，10列）。编辑后，可以保存更改。由于我不想重新保存整个表，我想跟踪已经进行更改的行。每个行标记都有唯一的id以及table-tag。但是使用.keyup只能使用$（'table'）而不是$（'tr'）或$（'td'），并且总是返回table-tag的is。这是我的html代码的简短示例：

    <table id="table1" contenteditable="true">
      <tr id="tr1"><td>Cell 11</td><td>Cell 12</td><td>Cell 13</td></tr>
      <tr id="tr2"><td>Cell 21</td><td>Cell 22</td><td>Cell 23</td></tr>
    </table>

在jQuery中我尝试过几样的事情：

    $(document).ready(function() {
      $('table').keyup(function(e) {
        alert($(this).attr('id'));
      });
    });

这总是导致'table1'。我如何得到'tr1'，'tr2'等？

Answer 1

使用e.target查看发起事件的元素，然后使用.closest("tr")从那里上升父层次结构以获取行。

$(document).ready(function() {
  $('table').keyup(function(e) {
    console.log($(e.target).closest("tr").attr("id"));
  });
});

仅供参考，除非您在表格中放置可以接受焦点的内容（例如<input>标记），否则您将无法获得表格中的任何关键事件。

工作演示：https://jsfiddle.net/jfriend00/1j7vkfma/

如何确定触发keyup事件的表行？

1 个答案: