touch events over table cells in iphone

Question

I have a table of 6 cols 8 rows.

<table border="1" id="patterntable" style="cursor: pointer;">
    <tr>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
    </tr>
    <tr>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
    </tr>
    <tr>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
    </tr>
    <tr>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
    </tr>
    <tr>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
    </tr>
    <tr>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
        <td align="center" width="40" height="40" >&nbsp;</td>
    </tr>
    <tr>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
    </tr>
    <tr>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
        <td align="center" height="40" >&nbsp;</td>
    </tr>
</table>

I have to achieve that when an user touch and move over the cells of table those cell will be filled with some letter or sign. I have tried following but it is not working, It fills the first cell only where I started the touch.

$("#patterntable td").on("touchmove",function(ev){
    ev.preventDefault();
    var e = ev.originalEvent;   
    $.each( e.touches, function( key, value ) {
        var touch = e.touches[key];
        if (touch.target.innerText != "\xA0"){
            touch.target.innerText = "\xA0";
        } else {
            touch.target.innerText = patternSymbol;
        }
    });
});

Please Someone help.

Answer 1

I had a similar issue - I made an HTML port of game of life made with a table of checkboxes. I was able to create a cool mousedown interface that allowed the "player" to draw on the board by dragging the mouse while it was down, and wanted to do the same for touch devices.

Unfortunately, touch events only hold references to the DOM element where they began (i.e. where "touchstart" fired) and do not recognize the DOM elements that exist under them. Instead, touch events maintain several lists of Touch objects - which represent interactions with the touch screen. Among these objects' properties are clientX and clientY, which indicate the X and Y coordinates of the events relative to the viewport.

I decided to see whether the DOM provided with a lookup function that could recognize DOM elements based on these coordinates, and found "document.elementFromPoint" thanks to the following question: Locating DOM element by absolute coordinates.

Finally, I created a 'touchmove' event listener that called the elementFromPoint method using the coordinates of the relevant touch event (for me, this was e.touches[0]) and then made the appropriate change to the elemet (in my case, toggling the textbox checked attribute). Here is a the event listener:

//this.gameGrid is a parent element for the checkboxes
this.gameGrid.addEventListener("touchmove", function(e) {
            // get the touch element
            var touch = e.touches[0];

            // get the DOM element
            var checkbox = document.elementFromPoint(touch.clientX, touch.clientY);

            // make sure an element was found - some areas on the page may have no elements
            if (checkbox) {
                // interact with the DOM element
                checkbox.checked = !checkbox.checked;
            }
            ...
        });

Links to a working example, the full source code for that example and some more notes about my research for this answer can be found here: https://gist.github.com/VehpuS/6fd5dca2ea8cd0eb0471