How to add or modify my jquery for multiple selection to this javascript?

I combined this answer with this one and it seems to work both on desktop and on mobile (code is a bit ugly, sorry for that).

How it works

Every <td> on the table listens both to normal mouse events (up/down/move) and to touch events (start/end/move).

On mousedown/touchstart the motion becomes "active", selection is reset (removing .highlight class) and current event element is selected.

The trick is in the touchmove event: since $(this) always refers to the element where the touch event started, we have to see what the user is actually touching passing the event coordinates to highlightHoveredObject, which will select the right element.

JSFiddle

JavaScript

function highlightHoveredObject(x, y) {
    $('td').each(function() {
      // check if is inside boundaries
      if (!(
          x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
          y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
      )) {

        $(this).addClass('highlight');
      }
    });
}

// if you are using jQuery Mobile replace the next line with
// $("#yourpage").on("pagecreate", function() {

$(document).ready(function() {  

    var active = false;

    $("td").on("mousedown", function(ev) {
        active = true;
        $(".highlight").removeClass("highlight"); // clear previous selection
        ev.preventDefault(); // this prevents text selection from happening
        $(this).addClass("highlight");
    });

    $("td").on("mousemove", function(ev) {
        if (active) {
            $(this).addClass("highlight");
        }
    });

    $(document).on("mouseup", function(ev) {
        active = false;
    });

    $("td").on("touchstart", function(ev) {
        active = true;
        $(".highlight").removeClass("highlight"); // clear previous selection
        ev.preventDefault(); // this prevents text selection from happening
        $(this).addClass("highlight");
    });

    $("td").on("touchmove", function(ev) {
        if (active) {
            var touch = ev.originalEvent.touches[0];
            highlightHoveredObject(touch.clientX, touch.clientY);
        }
    });

    $(document).on("touchend", function(ev) {
        active = false;
    });

});

HTML

<table border="1" width="100%">
    <tbody><tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody></table>

CSS

.highlight { background-color:#ccffcc; }