JSFiddle - React, Tailwind, and code Playground

by kannan ds

HTML

<table id="table">
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
      </tr>
      <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
      </tr>
    </table>

CSS

#table { border:1px solid #ccc; }
    #table td { padding:50px; }
    #table td.selected { background-color:#ccc; }

JavaScript

$(function () {
            $("#table td")
                .mousedown(rangeMouseDown)
                .mouseup(rangeMouseUp)
                .mousemove(rangeMouseMove);
              var currentTr;
        });

        var dragStart = 0;
        var dragEnd = 0;
        var isDragging = false;

        function rangeMouseDown(e) {
            
             var $this = $(this);
             currentTr = $this.closest('tr').get(0);
            
            if (isRightClick(e)) {
                return false;
            } else {
                var allCells = $("#table td");
                dragStart = allCells.index($(this));
                isDragging = true;

                if (typeof e.preventDefault != 'undefined') { e.preventDefault(); } 
                document.documentElement.onselectstart = function () { return false; };
            } 
              var $this = $(this);
                currentTr = $this.closest('tr').get(0);
        }

        function rangeMouseUp(e) {
            
                        if( currentTr != $(this).closest('tr').get(0)){
            return false;
                }

            if (isRightClick(e)) {
                return false;
            } else {
                var allCells = $("#table td");
                dragEnd = allCells.index($(this));

                isDragging = false;
                if (dragEnd != 0) {
                    selectRange();
                }

                document.documentElement.onselectstart = function () { return true; }; 
            }
            
        }

        function rangeMouseMove(e) {
            
              if( currentTr != $(this).closest('tr').get(0)){
            return false;
                }

            
            if (isDragging) {
                var allCells = $("#table td");
                dragEnd = allCells.index($(this));
                selectRange();
            }    
            if( currentTr != $(this).closest('tr').get(0)){
            return false;
    ...