title: Differentiate keydown on a HTML table row from a table cell
body: <p>I have a Bootstrap HTML table where I need to detect when the delete key has been pressed at the row level and when at the cell level. Each cell has an Id. All javascript code is based on ES6 classes.</p>
  
  <p>I'm setting the event handler as:</p>
  
  <pre><code>$('#footable').on('keydown',this.onKeyDown.bind(this));
  
  onKeyDown(event){
  
  }
  </code></pre>
  
  <p>This event gets fired whenever a key is pressed at the row level or at the cell level, however I'm not able to identify at what level it was fired. If I traverse the event data I always get the attributes of the row (id, class, etc and the entire row inner html). I have tried setting the event handler with selectors at the cell level, adding a standard class attribute E.g <code>'fooclass'</code> to each cell and attaching the event to the class but the event handler doesn't get fired: <code>$('[class*=fooclass]').on('keydown',this.onKeyDown.bind(this));</code></p>
  
  <p>Is there an option to differentiate this by using the .on method of JQUERY? Or any other option? </p>