JSFiddle - React, Tailwind, and code Playground

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>
<br/>
<input type='button' id='cListIs' value='List selected Ids in console' /><br/>
<input type='button' id='aListIds' value='List selected Ids in alert' />

CSS

body{font-size:62.5%;}
td { padding: 0.2em 0.4em; }
.ui-selecting, .ui-selected { background: lightBlue }

JavaScript

window.addEventListener('load',function load()
{
    var ids = [],
        tbl = document.getElementById('tableStudent');
    window.addEventListener('keydown',(function()
    {
        var expr = /\bui\-selected\b/i,
            key, prev,
            clickCb = function(e)
            {
                e = e || window.event;
                var i, target = (function(elem)
                {//get the row element, in case user clicked on cell
                    if (elem.tagName.toLowerCase() === 'th')
                    {//head shouldn't be clickable
                        return elem;
                    }
                    while(elem !== tbl)
                    {//if elem is tbl, we can't determine which row was clicked anyway
                        if (elem.tagName.toLowerCase() === 'tr')
                        {//row found, break
                            break;
                        }
                        elem = elem.parentNode;//if td clicked, goto parent (ie tr)
                    }
                    return elem;
                }(e.target || e.srcElement));
                if (target.tagName.toLowerCase() !== 'tr')
                {//either head, table or something else was clicked
                    return e;//stop handler
                }
                if (expr.test(target.className))
                {//if row WAS selected, unselect it
                    target.className = target.className.replace(expr, '');
                }
                else
                {//target was not selected
                    target.className += ' ui-selected';//set class
                }
                if (key === 17)
                {//ctrl-key was pressed, so end handler here
                    return e;
                }
                //key === 16 here, handle shift event
                if (prev === undefined)
                {//first click, set previous and return
                    prev = target;
                    return e;
           ...