determine which table cell triggered hammer.js event

Question

I have an html table in which all the cells within a column have the same css class 'className'.

I want to apply hammer.js on 'hold' event to these cells. I call hammer.js like so:

Hammer('td.className').on('hold', doModal);

I need to find out exactly what cell was 'hold'. In my modal window I have a select element that will set the new value of the cell.

I can not set an ID for each cell on that column, because the table is dynamically generated. My doModal callback gets called several times, because I select all cells with class 'className'. I can get the doModal to be called only once, but I can not determine which cell (row + column) triggered the 'hold' event.

How can I achieve that ?

Answer 1

You can find out the held table cell using the target property in the event object.

for example,

var tab = document.getElementById("tab"); // reference to your table
Hammer(tab).on('hold',function(ev){ 
 console.log(ev)
 ev.target.style.background='red'; //will give red background for the held cell
});

i tried to put together a fiddle but can't find a working link to hammer.

update: fiddle