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

You can use event delegation for that. Basically you add one clickhandler to your table. This handler reads out the tagname of the clicked element and moves up the DOM tree until the containing row is found. If a row is found, it acts on it and returns. Something like (not tested yet, but may give you ideas):

    var table = document.getElementById('my_table');
    table.onclick = function(e) {
       e = e || event;
       var eventEl = e.srcElement || e.target, 
           parent = eventEl.parentNode,
           isRow = function(el) {
                     return el.tagName.match(/tr/i));
                   };

       //move up the DOM until tr is reached
       while (parent = parent.parentNode) {
           if (isRow(parent)) {
             //row found, do something with it and return, e.g.
              alert(parent.rowIndex + 1); 
              return true;
           }
       }
       return false;
   };

Answer 2

The this keyword can be used to get the parentNode of the cell, which is a <tr> element. The <tr> 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;
};

Answer 3

This uses sectionRowIndex to get the index in the containing tBody.

function getRowIndex(e){
 e= window.event || e;
 var  sib, who= e.target || e.srcElement;
 while(who && who.nodeName!= 'TR') who= who.parentNode;
 if(who){
  alert(who.sectionRowIndex+1)
  if(e.stopPropagation) e.stopPropagation();
  else e.cancelBubble= true;
  // do something with who...
 }
}

onload= function(){
 document.getElementById('my_table').onclick= getRowIndex;
}