JSFiddle - React, Tailwind, and code Playground

HTML

<table id="MySpecialTable">
    <tbody></tbody>
</table>
<br />
<div id='textDiv'>Log</div>
<div id='mousePos'>Log</div>

CSS

#MySpecialTable {
    width:400px;
    margin: 0 auto;
    border:solid;
    cursor: pointer;
    border-width:1px;
    unselectable:on;
    user-select:none;
    MozUserSelect:none;
}
#MySpecialTable tr td {
    height:20px;
    line-height:20px;
    font-size:15px;
    padding-left:10px;
    color:black;
    font-family: Arial;
}
#MySpecialTable tr:nth-child(even) td {
    background-color:#DDD;
}
#MySpecialTable tr:nth-child(odd) td {
    background-color:#EFEFEF;
}

JavaScript

setTimeout(function(){
    $("#MySpecialTable").html("<tr><td> Hello 1</td></tr><tr><td> Hello 2</td></tr><tr><td> Hello 3</td></tr><tr><td> Hello 4</td></tr><tr><td> Hello 5</td></tr><tr><td> Hello 6</td></tr>");
},1000);
var selected;
$(document).on("mousedown", "#MySpecialTable tr", function (e) {
    e.preventDefault(); //stop the text selection;
    $("#textDiv").text(this.textContent);
    selected = $(this);
    selected.find("td").css("background-color", "#999");
});
$(document).on("mouseup", function () {
    $("#textDiv").text("Left " + selected.text());
    selected.find("td").css("background-color", "");
    selected = null;
});
$(document).on("mousemove", function (e) {
    if (selected != null) { // got an element selected
        if ($("#MySpecialTable").has(e.target).length > 0) { //in the table
            var el = $(e.target).closest("tr"); //the tr element we're on
            el.before(selected); // replace the elements
        }
    } else {
        $("#mousePos").text("NOT SELECTED");
    }
});

$("#MySpecialTable").on('selectstart', false); //Don't let the user select the table