JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head lang="fr">
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="data:," type="image/x-icon">
    <title>Sélection plage de cellules</title>
    <style>
        #grille-container {
            margin: 5% 10%;
        }

        #grille {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
            user-select: none;
        }

        #grille td,
        #grille th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        #grille tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        #grille tr:hover {
            background-color: #ddd;
        }

        #grille th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #4CAF50;
            color: white;
        }

        #grille td.selected {
            background-color: #927de0;
        }
    </style>
</head>

<body>
    <header>
        <h1>Sélection plage de cellules</h1>
    </header>
    <main>
        <div id="grille-container">
            <table id="grille">
                <tr>
                    <th>Lorem</th>
                    <th>ipsum</th>
                    <th>dolor</th>
                    <th>sit</th>
                    <th>amet</th>
                    <th>consectetur</th>
                    <th>adipiscing</th>
                    <th>elit</th>
                </tr>
                <tr>
                    <td>sed-L0-C0</td>
                    <td>do-L0-C1</td>
                    <td>eiusmod</td>
                    <td>tempor</td>
                    <td>incididunt</td>
                    <td>ut</td>
                    <td>labore</td>
                    <td>et</td>
                </tr>
                <tr>
                    <td>dolore-L1-C0</td>
                    <td>magna-L1-C1</td>
                    <td>aliqua</td>
            ...

JavaScript

"use strict";

console.log("jQuery version:", jQuery.fn.jquery);

$(function () {
    // Coordonnées des deux cellules de début et de fin
    let selection = {
        debut: { l: 0, c: 0 },
        fin: { l: 0, c: 0 }
    };
    let cells = $("#grille td");
    console.log(cells);
    let active = false;



    cells.on({
        "mousedown": evt => {
            cells.removeClass("selected");

            active = true;
            selection.debut.l = $(evt.target).parent().index() - 1; // Numéro de la ligne
            selection.debut.c = $(evt.target).index(); // Numéro de la colonne
            $(evt.target).addClass("selected");



        },
        "mouseup": evt => {
            if (active) {
                selection.fin.l = $(evt.target).parent().index() - 1; // Numéro de la ligne
                selection.fin.c = $(evt.target).index(); // Numéro de la colonne
         
                console.log("Début sélection", selection.debut, "fin sélection", selection.fin);

                console.log("Fin sélection");
                active = false;
            }
        },
        "mousemove": evt => {
            if (active) {
                $(evt.target).addClass("selected");
                console.log("Move active");
            }
        }
    });

});