JSFiddle - React, Tailwind, and code Playground

HTML

<table id="MySpecialTable">
    <tbody></tbody>
</table>
<br />

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);

(function ($) {
    $.GertVDragTable = function (tableName) {
        var selected;
        $(document).on("mousedown", tableName+" tr",function (e) {
            e.preventDefault(); //stop the text selection;
            selected = $(this);
            selected.find("td").css("background-color", "#999");
        });

        $(document).on("mouseup", function () {
            selected.find("td").css("background-color", "");
            selected = null;
        });
        $(document).on("mousemove", function (e) {
            if (selected != null) { // got an element selected
                if ($(tableName).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
                }
            }
        });

        $(tableName).on('selectstart', false); //Don't let the user select the table
    }
})(jQuery);

$.GertVDragTable("#MySpecialTable");