How to determine which string [tr] is pressed?

Question

In javascript, how can we determine which row of a table is clicked? Currently, what I am doing is binding a method at runtime 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 do not like this approach. Is there an alternative? My problem is only to get the index of the row that is clicked.

• No jQuery: D.

Answer 1

You can use event delegation . Basically you add one clicker to the table. This handler reads the tag of the clicked element and moves up the DOM tree until the contained string is found. If a string is found, it acts on it and returns. Something like (not yet tested, but might 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, eg alert(parent.rowIndex + 1); return true; } } return false; }; 

Answer 2

This keyword can be used to get the parentNode cell that is a <tr> element. The <tr> element has a property for the line number, .rowIndex .

Event:

 onclick='fncEditCell(this)' 

Function:

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

Full working example here:

jsFiddle

Dynamically set an OnClick event

Use .setAttribute to .setAttribute click event:

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

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