JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<table id="tableStudent" border="1">
    <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>
    </tbody>
</table>

<a id="clearAll">Clear</a>

CSS

.selected {
    background: lightBlue
}

JavaScript

loadTable = (tableID, clearbutton)=>{
    let table = document.getElementById(tableID);
    let lastSelectedRow;
    let trs = table.tBodies[0].querySelectorAll('tr');

    table.onselectstart = function() {
        return false;
    }

    trs.forEach((tr)=>{
        tr.addEventListener("click", (currentRow)=>{
     
            if (window.event.ctrlKey) {
                tr.className = tr.className == 'selected' ? '' : 'selected';
              	lastSelectedRow = tr;
            }
        
            if (window.event.button === 0) {
                if (!window.event.ctrlKey && !window.event.shiftKey) {
                    tr.className = tr.className == 'selected' ? '' : 'selected';
        						lastSelectedRow = tr;
                }
        
                if (window.event.shiftKey) {
                		indexes = [lastSelectedRow.rowIndex, tr.rowIndex];
                  	indexes.sort(function(a, b) {
                        return a - b;
                    });

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

    document.getElementById(clearbutton).addEventListener("click", ()=>{
        for (var i = 0; i < trs.length; i++) {
            trs[i].className = '';
        }
    });
};

loadTable("tableStudent", "clearAll");