keyupイベントが発生したテーブル行<tr>を特定する方法はありますか？

Question

私は画面上で編集できる長いテーブル（10,000行、10列）を持っています。編集後、変更を保存することができます。私はテーブル全体を再保存したくないので、変更が加えられた行を追跡したいと思います。各行タグには、一意のIDとtableタグがあります。しかし、.keyupを使うと$（ 'tr'）や$（ 'td'）ではなく$（ 'table'）だけで機能し、常にテーブルタグの値を返します。ここに私の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")を使用して親階層を上に移動して行を取得します。 FYI

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

あなたは（<input>タグのような）フォーカスを受け入れることができるテーブルで何かを置くまで、あなたのテーブル内の任意のキーイベントを取得することができなくなります。

デモの作業：https://jsfiddle.net/jfriend00/1j7vkfma/