Javascript - Get id of row table dynamically

Question

i have a function in JavaScript for detecting every object clicked.

document.addEventListener("click", reply_click);
function reply_click(evt){
    evt = evt || window.event;
    evt = evt.target || evt.srcElement;
    alert(evt.id);
}

and i have html code that contain table and every row have an id. the html code is :

<table id='tableid1'>
<tr id="rowid1" class='handz'>
   <td id='tdid1'><font id='fontid1'>hello</font></td>
</tr>
</table>

i want a method (not onclick event for tr) to when click on table row or table td or text inside td that be able to detect tr id? any help or suggesting will be appreciated.

Does this answer your question? [JavaScript - onClick to get the ID of the clicked button](https://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button) — Kunal Mukherjee, Apr 25 '20 at 15:04
Keep looking at `.parentElement` until you reach element with tag name ‘tr’? https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement — terrymorse, Apr 25 '20 at 15:08

score 0 · Accepted Answer · answered Apr 25 '20 at 15:38

This could be a solution:

document.addEventListener("click", reply_click);

function reply_click(evt) {
  evt = evt || window.event;
  evt = evt.target || evt.srcElement;

  let rowParent = evt.parentElement
  while (rowParent.tagName !== 'TR') {
    rowParent = rowParent.parentElement
  }
  console.log(rowParent.id)

}

<table id='tableid1'>
  <tr id="rowid1" class='handz'>
    <td id='tdid1'>
      <font id='fontid1'>hello1</font>
    </td>
  </tr>
  <tr id="rowid2" class='handz'>
    <td id='tdid2'>
      <font id='fontid2'>hello2</font>
    </td>
  </tr>
</table>

Javascript - Get id of row table dynamically

1 Answers1