JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<table class="sortable">
    <tbody>
        <tr id="Leanne">
            <td width="5" align="center" class="cols sort">&nbsp;</td>
            <td align="left"><a onclick="getUsrInfo(1)" class="__productTBLink"><strong>Leanne Seawright</strong>, Web Designer <span class="__rowShowInfo">- view info.</span></a></td>
            <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(1);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a><input type="text" value="1" id="ordering[1]" name="ordering"></td>
        </tr>
        <tr id="George">
            <td width="5" align="center" class="cols sort">&nbsp;</td>
            <td align="left"><a onclick="getUsrInfo(2)" class="__productTBLink"><strong>George Jetson</strong>, Driver <span class="__rowShowInfo">- view info.</span></a><input type="text" value="2" id="ordering[2]" name="ordering"></td>
            <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(2);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a></td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: 1px solid black;
    width: 100%;
}
td,th { border: 1px dotted black; }

JavaScript

$('.sortable tbody').sortable({ 
    opacity: 0.6, 
    cursor: 'move',
    update: function(event, ui) {
      var ordering = $(this).sortable('toArray').toString();
      alert(ordering);
    }
  });