Using jQuery UI sortable with HTML tables

jquery jquery-ui html-table jquery-ui-sortable

You can call sortable on a <tbody> instead of on the individual rows.

<table>    <tbody>        <tr>             <td>1</td>            <td>2</td>        </tr>        <tr>            <td>3</td>            <td>4</td>         </tr>        <tr>            <td>5</td>            <td>6</td>        </tr>      </tbody>    </table><script>    $('tbody').sortable();</script>

Show code snippet

$(function() {  $( "tbody" ).sortable();});

 table {    border-spacing: collapse;    border-spacing: 0;}td {    width: 50px;    height: 25px;    border: 1px solid black;}

 <link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"><script src="//code.jquery.com/jquery-1.11.1.js"></script><script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script><table>    <tbody>        <tr>            <td>1</td>            <td>2</td>        </tr>        <tr>            <td>3</td>            <td>4</td>        </tr>        <tr>             <td>5</td>            <td>6</td>        </tr>        <tr>            <td>7</td>            <td>8</td>        </tr>        <tr>            <td>9</td>             <td>10</td>        </tr>      </tbody>    </table>

Expand snippet