JSFiddle - React, Tailwind, and code Playground

HTML

You can only select by clicking the "ID" column's cells.

<table id="tableStudent">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Class</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>4th</td>
        </tr>
         <tr>
            <td>2</td>
            <td>Jack</td>
            <td>5th</td>
        </tr>
         <tr>
            <td>3</td>
            <td>Michel</td>
            <td>6th</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mike</td>
            <td>7th</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Yke</td>
            <td>8th</td>
        </tr>
         <tr>
            <td>6</td>
            <td>4ke</td>
            <td>9th</td>
        </tr>
        <tr>
            <td>7</td>
            <td>7ke</td>
            <td>10th</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Yuval</td>
            <td>Classy</td>
        </tr>
    </tbody>
</table>

CSS

.selected {
    background: #bdf;
}

td:first-child {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

td,th {
    padding: 3px;
    border: 2px solid #aaa;
}

table {
    border-collapse: collapse;
}

JavaScript

var selectionPivot;
// 1 for left button, 2 for middle, and 3 for right.
var LEFT_MOUSE_BUTTON = 1;
var trs = document.getElementById('tableStudent').tBodies[0].getElementsByTagName('tr');
var idTds = $('td:first-child');
idTds.each(function(idx, val) {
    // onselectstart because IE doesn't respect the css `user-select: none;`
    val.onselectstart = function() { return false; };
    $(val).mousedown(function(event) {
        if(event.which != LEFT_MOUSE_BUTTON) {
            return;
        }
        var row = trs[idx];
        if (!event.ctrlKey && !event.shiftKey) {
            clearAll();
            toggleRow(row);
            selectionPivot = row;
            return;
        }
        if (event.ctrlKey && event.shiftKey) {
            selectRowsBetweenIndexes(selectionPivot.rowIndex, row.rowIndex);
            return;
        }
        if (event.ctrlKey) {
            toggleRow(row);
            selectionPivot = row;
        }
        if (event.shiftKey) {
            clearAll();
            selectRowsBetweenIndexes(selectionPivot.rowIndex, row.rowIndex);
        }
    });
});

function toggleRow(row) {
    row.className = row.className == 'selected' ? '' : 'selected';
}

function selectRowsBetweenIndexes(ia, ib) {
    var bot = Math.min(ia, ib);
    var top = Math.max(ia, ib);

    for (var i = bot; i <= top; i++) {
        trs[i-1].className = 'selected';
    }
}

function clearAll() {
    for (var i = 0; i < trs.length; i++) {
        trs[i].className = '';
    }
}