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 onmousedown="RowClick(this,false);">
            <td>1</td>
            <td>John</td>
            <td>4th</td>
        </tr>
         <tr onmousedown="RowClick(this,false);">
            <td>2</td>
            <td>Jack</td>
            <td>5th</td>
        </tr>
         <tr onmousedown="RowClick(this,false);">
            <td>3</td>
            <td>Michel</td>
            <td>6th</td>
        </tr>
        <tr onmousedown="RowClick(this,false);">
            <td>4</td>
            <td>Mike</td>
            <td>7th</td>
        </tr>
        <tr onmousedown="RowClick(this,false);">
            <td>5</td>
            <td>Yke</td>
            <td>8th</td>
        </tr>
         <tr onmousedown="RowClick(this,false);">
            <td>6</td>
            <td>4ke</td>
            <td>9th</td>
        </tr>
        <tr onmousedown="RowClick(this,false);">
            <td>7</td>
            <td>7ke</td>
            <td>10th</td>
        </tr>
    </tbody>
</table>

CSS

.selected {
    background: lightBlue
}
.normal {
    background: #ffffff
}

JavaScript

var selectedrow;function RowClick(currenttr, lock) {
   var trs =tableStudent.tBodies[0].getElementsByTagName("tr");
   var cnt;
		if(window.event.button==2)
		{
			if(currenttr.className=='selected')		
			return false;				
		}
    alert(trs.length);
    if (((window.event.shiftKey) && (window.event.ctrlKey) ) ||(window.event.shiftKey))
		{ 
			for(var j=0; j<trs.length; j++)
			{				
				if (trs[j].className!='normallock')
				{
					trs[j].className='normal';
				}
			}
			var mark=false;
				
			if (typeof(selectedrow)=="undefined")
			{
				selectedrow=currenttr;
				selectedrow.className='selected' 
				return false;
			}
			for(var j=0; j<trs.length; j++)
			{
				
				if ((trs[j].id ==selectedrow.id) || (trs[j].id ==currenttr.id) )
				{
					if (trs[j].className!='normallock')
					{
					trs[j].className='selected'
					mark = !(mark);
					}
				}
				else
				{
					if(mark==true)
					{
						if (trs[j].className!='normallock')
						trs[j].className='selected'
					}
				}
			}
		}
		else if(window.event.ctrlKey) 
		{
			//if ctrl key is seelcted while selecting the patients
			// select the patient with currently clicked row plus
			// maintain the previous seelcted status
			cnt=0;
			for(var j=0; j<trs.length; j++)
			{
				if(trs[j].id == currenttr.id)
				{
					if(trs[j].className=='selected')
					{
						trs[j].className='normal';
					}else
					{
						trs[j].className='selected';
					}					
				}
				if(trs[j].className=='selected')
				{
					cnt++;	
				}
			}
			
			if(cnt==0)
			{
				selectedrow=undefined;
				return false;
			}
		}
		else
		{
			for(var j=0; j<trs.length; j++)
			{
				if(trs[j].id == currenttr.id)
				{
					trs[j].className='selected'
				}
				else
				{
					if (trs[j].className!='normallock')
					trs[j].className='normal';
				}
					
			}
		}
		selectedrow=currenttr;
}