How to know element clicked within a table?

Question

I\'m trying get the element clicked within a TR in a HTML table. If I click on the Select input inside a TR, CurrentTarget field returns \"TR\", and OriginalT

Answer 1

To properly understand you need to know the basics of javascript.

most of the browser especially modern ones like mobile use standard javascript like:

element.addEventListener //to add Event Handlers
//those eventListeners return always the event as first parameter
//and this event contains the target which can be called with
event.target

but older browsers or internet explorer uses different ways to achieve this

attachEvent //to add eventListener
// the event needs to be called with
window.event
// and the target is called
event.srcElement

knowing that you can write a function like this:

//addEvent checks if addEventListener exists else it uses attachEvnet
//as you can see attachEvent also has only 2 parameters and needs a 'on'
//before the event name
function addEvent(a,e,f){//Element,Event,Function(the actual eventHandler)
 window.addEventListener?a.addEventListener(e,f,false):a.attachEvent('on'+e,f);
}

//handler handles in this case the click event
//it checks if the first parameter is event else it uses the window.event
//it checks if inside the event exists a event.target else event.srcElement
//then it loops through the parentNode until it finds(this case) the TR Element
//and just to test it alerts the content of it
//if you want to get the TD element replace e.target.parentNode with e.target
//and TR with TD
// so you get the proper row or column clicked.
function handler(e){
 e=e||window.event;
 e.target=e.target||e.srcElement;
 var x=e.target.parentNode;
 while(x.nodeName!='TR'){//or x.localName but thats lowercase 'tr'
  x=x.parentNode;
 }
 alert(x.innerHTML);
}

//when the page loads it it searches for the first table (note the [0])
//and adds a eventListener to the whole table.
//this allows you to have one eventListener on the full table but
//control every single row or column.
window.onload=function(){
 var table=document.getElementsByTagName('table')[0];
 addEvent(table,'click',handler);
}

thats why jQuery exists... to avoid all this double checks.

anyway ... after some tests and as mobile browsers support the modern standard ways... i prefer to leave out jQuery from mobile webapps as it just slows down everything.

So for mobile devices i use:

function handler(e){
 var x=e.target;
 while(x.nodeName!='TR'){
  x=x.parentNode;
 }
 console.log(x.innerHTML);
}
window.onload=function(){
 var table=document.getElementsByTagName('table')[0];
 table.addEventListener('click',handler,false);
}