JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

CSS

table { width: 100%; }
td { height: 30px; border: 1px solid black; }
td.active { background: red; }

JavaScript

var mousedown = false;

$(document).mousedown(function() {
    mousedown = true;
});

$(document).mouseup(function() {
    mousedown = false;
    if ($('tr.active').length > 1) {
        alert('separate rows');
    }
    else { alert('same row'); }
    
    $('.active').removeClass('active');
});

$('td').mousedown(function() {
    $(this).addClass('active').parent().addClass('active');
});

$('td').mouseover(function() {
    if (mousedown) {
        $(this).addClass('active').parent().addClass('active');
    }
});