How to know element clicked within a table?

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 OriginalTarget returns "SELECT".

This is my HTML:

<table id="0" class="tableEdit">
            <th name="id"></th>
            <th name="name">Descripción Registro</th>
            <th name="select">Fecha</th>
                <select name="selectName">
                    <option value="1">1</option>
                    <option value="2">2</option>

And this is my code:

            //trb is each TR element of the line
        if (elem.currentTarget && elem.currentTarget.tagName.toLowerCase() === "tr" && !isInput(elem.originalTarget)){
            if (editableRow){
                var rowTrigger = editableRow.find("button").get();
                $.editRow(rowTrigger,$.tableEditor.vault.getTableID($("#" + id)));

This code is working fine on my web browser, but it doesn't on mobile devices, because OriginalTarget returns undefined. Is there any way to get the original target on a mobile web browser?



You haven't actually said what trb is but it sounds like it might be a set of the tr elements in your table.

What you're looking for is That's the topmost element that was clicked, the one that initiated the event. (FWIW, I wouldn't call the argument passed to the event handler elem, it's an event, not an element.)

For instance, if you have:

<td><span><strong>Click me</strong></span></td>

...and this:

$("tr").click(function(e) {

...and you click the text "click me," you'll see

STRONG the console.

Side note: It's handy to use closest with that if you want to know what cell or row was clicked, e.g.:

var $td = $('td');

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

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

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

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)

//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 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 with
//and TR with TD
// so you get the proper row or column clicked.
function handler(e){
 while(x.nodeName!='TR'){//or x.localName but thats lowercase 'tr'

//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.
 var table=document.getElementsByTagName('table')[0];

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 table=document.getElementsByTagName('table')[0];


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.