How to detect which row [ tr ] is clicked?

Question

In javascript, how can we detect which row of the table is clicked? At present what i am doing is, i am binding the the method at run time like this.

onload         


        

Answer 1

The this keyword can be used to get the parentNode of the cell, which is a element. The element has a property for the row number, .rowIndex.

The Event:

onclick='fncEditCell(this)'

The Function:

window.fncEditCell = function(argThis) {
    alert('Row number of Row Clicked: ' + argThis.parentNode.rowIndex);
};

Full Working Example Here:

jsFiddle

Dynamically Set OnClick Event

Use .setAttribute to inject a click event:

cell2.setAttribute("onmouseup", 'editLst(this)');

Example of Dynamically Creating a Table:

for(var prprtyName in rtrnTheData) {
  var subArray = JSON.parse(rtrnTheData[prprtyName]);

  window.row = tblList.insertRow(-1);

  window.cell1 = row.insertCell(0);
  window.cell2 = row.insertCell(1);
  window.cell3 = row.insertCell(2);
  window.cell4 = row.insertCell(3);
  window.cell5 = row.insertCell(4);
  window.cell6 = row.insertCell(5);
  window.cell7 = row.insertCell(6);
  window.cell8 = row.insertCell(7);
  window.cell9 = row.insertCell(8);

  cell1.setAttribute("onmouseup", 'dletListing(this.title)');
  cell1.setAttribute("title", "'" + subArray.aa + "'");

  cell2.setAttribute("onmouseup", 'editLst(this)');
  cell2.setAttribute("title", "'" + subArray.aa + "'");

  cell1.innerHTML = "Dlet";
  cell2.innerHTML = "Edit";
  cell3.innerHTML = subArray.ab;
  cell4.innerHTML = "$" + subArray.ac;
  cell5.innerHTML = subArray.ad;
  cell6.innerHTML = subArray.ae;
  cell7.innerHTML = subArray.af;
  cell8.innerHTML = subArray.ag;
  cell9.innerHTML = subArray.meet;
};