How to Change the Order of Table Rows via Drag-and-Drop Using jquery.tablednd.js

When you want to reorder table data on a website, manually re-entering everything can be a hassle. That’s where “jquery.tablednd.js” comes in handy. With this plugin, you can easily rearrange rows in a `table` by dragging and dropping. Even without special knowledge, you can implement this with just a few lines of code.

In this article, we will clearly explain how to use “jquery.tablednd.js” to reorder table rows. We’ll go through the CSS, JavaScript, and HTML setup in order, so feel free to follow along.

CSS for Drag-and-Drop Row Reordering in a table Tag

*CSS for the table tag (#table-1). Modify as needed.*

<style type="text/css">
<!--
body {
  text-align: center;
  font-size: 16px;
}
h1 {
  text-align: center;
  padding: 10px 0 0 0;
  font-size: 18px;
  font-weight: bold;
}
#table-1 {
  width: 260px;
  margin: 0 auto;
  border-top: solid 1px #cccccc;
  border-left: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
}
#table-1 tr:hover {
  background-color: #cccccc;
}
#table-1 td {
  padding: 4px 0;
  border-bottom: solid 1px #cccccc;
}
-->
</style>

JavaScript for Drag-and-Drop Row Reordering Using jquery.tablednd.js

*Load `jquery.min.js` and `jquery.tablednd.js` files. Use `$(“table selector”).tableDnD()` to enable drag-and-drop on the specified table.*

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablednd.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $("#table-1").tableDnD();
});
</script>

HTML for a Table with Drag-and-Drop Row Reordering

*A sample table (id=”table-1″) where rows can be reordered via drag-and-drop. Modify as needed.*

<h1>You can drag and drop rows in this table to reorder them</h1>

<table id="table-1" cellspacing="0" cellpadding="2">
    <tr id="1"><td>1</td><td>One</td><td>Text</td></tr>
    <tr id="2"><td>2</td><td>Two</td><td>Text</td></tr>
    <tr id="3"><td>3</td><td>Three</td><td>Text</td></tr>
    <tr id="4"><td>4</td><td>Four</td><td>Text</td></tr>
    <tr id="5"><td>5</td><td>Five</td><td>Text</td></tr>
    <tr id="6"><td>6</td><td>Six</td><td>Text</td></tr>
</table>

Demo Page for Drag-and-Drop Row Reordering

Demo page for reordering table rows via drag-and-drop

Source: Table Drag and Drop JQuery Plugin

Here is the source website:
Table Drag and Drop JQuery plugin

Conclusion

By using “jquery.tablednd.js”, you can intuitively reorder table rows with drag-and-drop. The code is simple, and you can easily implement it by just loading jQuery.

This plugin is useful for various purposes such as rearranging task lists or changing the order of product listings. If you want to make data reordering smoother, be sure to give it a try!

*Use at your own risk when reusing this content. Please do not reuse the Google Analytics tag in the `` of the demo page.*