Test shift selection

HTML

<table id="tbl" border="1">
    <tr>
        <td>></td>
        <td>ajdhaskjd</td>
    </tr>
    <tr>
        <td>></td>
        <td>ajdhaskjd</td>
    </tr>
    <tr>
        <td>></td>
        <td>ajdhaskjd</td>
    </tr>
    <tr>
        <td>></td>
        <td>ajdhaskjd</td>
    </tr>
    <tr>
        <td>></td>
        <td>ajdhaskjd</td>
    </tr>
    <tr>
        <td>></td>
        <td>ajdhaskjd</td>
    </tr>
    <tr>
        <td>></td>
        <td>ajdhaskjd</td>
    </tr>
    <tr>
        <td>></td>
        <td>ajdhaskjd</td>
    </tr>
    <tr>
        <td>></td>
        <td>ajdhaskjd</td>
    </tr>
</table>

CSS

table {
    width: 100%;
}
tr.selected td {
    background: yellow;
}
tr.selected.selectionStart td {
    background:blue;
}

tr{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
  -ms-user-select: none;
}

JavaScript

$("#tbl").on("click", "tr", function (e) {
    var $this = $(this);
    var trs = $this.siblings("tr").addBack();
    if (e.shiftKey) {
        console.log("shift");
        var startSelection = $(trs).filter(".selectionStart");
        if (startSelection.length > 0) {
            var indexStartSelection = $(trs).index(startSelection[0]);

            var indexClickedRow = $(trs).index(this);
            console.log("index : [" + indexStartSelection + "|" + indexClickedRow + "]");
            if(indexStartSelection !== indexClickedRow){
                var sIndex = indexStartSelection > indexClickedRow ? indexClickedRow : indexStartSelection;
                var eIndex = indexStartSelection < indexClickedRow ? indexClickedRow : indexStartSelection;
                console.log("newIndex: ["+sIndex+"|"+eIndex+"]");                $(trs).removeClass("selected").filter(":eq("+sIndex+"),:gt("+sIndex+"):lt("+(eIndex-sIndex)+")").addClass("selected");
            }
        }

    } else {
        if ($this.hasClass("selected")) {
            $this.removeClass("selected selectionStart");
            //if(selectedTrs.length > 0)
            //    $(selectedTrs[0]).addClass("selectionStart")
        } else {
            $this.addClass("selected");
            //if(selectedTrs.length == 0)
            //    $this.addClass("selectionStart");
        }
        var selectedTrs = $this.siblings(".selected").addBack(".selected");

        if (selectedTrs.length > 0) {
            $(selectedTrs).removeClass("selectionStart")
            $(selectedTrs[0]).addClass("selectionStart");
        }
    }
});