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 = function() {
    if (!document.getElementsByTagName || !document.createTextNode) return;
    var rows = document.getElementById('my_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function() {
            alert(this.rowIndex + 1);
        }
    }
}

[ copied from [ http://webdesign.maratz.com/lab/row_index/ ] ]

But i don't like this approach. Is there any alternative? My problem is just to get the index of the row which is clicked.

No jQuery please :D.

Is there something wrong with `rowIndex` as you have it? Works well doesn't it? — Crescent Fresh, Dec 01 '09 at 05:42
I just wanted to know if there is any other better approach. In any case, if no soultion is found then i will have to go by this. — Rakesh Juyal, Dec 01 '09 at 06:00
Can you be more specific on 'better approach'? Better in what sense, event handling or object selection or what? — rahul, Dec 01 '09 at 06:21
actually, i think iterating over 100 rows is not a good idea, is it possible to achieve same thing without iteration. — Rakesh Juyal, Dec 01 '09 at 06:34
Rakesh, how is this different than your other question asked shortly before this regarding the same thing? http://stackoverflow.com/questions/1824292/javascript-rowindex-method-is-not-working — Justin Johnson, Dec 01 '09 at 06:39
@Justin: justin just in case u wanted to know, this question was asked first and after that i asked the question u just specified. — Rakesh Juyal, Dec 01 '09 at 07:52
https://stackoverflow.com/questions/66309595/tkinter-open-html-file-based-on-filename-in-dropdown-menu — NAzira Nasir, Feb 22 '21 at 03:15

score 5 · Accepted Answer · edited May 23 '17 at 12:01

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;
   };

score 1 · Answer 2 · answered May 07 '14 at 05:03

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;
};

score 0 · Answer 3 · answered Dec 01 '09 at 13:17

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;
}

score 0 · Answer 4 · answered Feb 21 '21 at 15:18

I tried Alan Wells written answer, but it was returning, undefined. So, I modified a little, to get the row index as follows:

argThis.rowIndex

This will return the row index for the row clicked.

modify the <tr> tag:

<tr onclick="fncEditCell(this)" >

Then, add a script tag at the bottom of the HTML:

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

As an example, you can see this image:

How to detect which row [ tr ] is clicked?

4 Answers4

The Event:

The Function:

Full Working Example Here:

Dynamically Set OnClick Event

Example of Dynamically Creating a Table:

Linked

Related