Here it is an example of a simple JavaScript /jQuery code that can be used to Drag and Drop table rows between two similar HTML tables (with the same number of columns), using jQuery UI. Click on codes to select them.

- The jQuery code (you must have jQuery and jQuery UI included before this code):
<script>
$(document).ready(function() {
  var $tabs = $('#t_draggable2')
  $("tbody.t_sortable").sortable({
    connectWith: ".t_sortable",
    items: "> tr:not(:first)",
    appendTo: $tabs,
    helper:"clone",
    zIndex: 999990
  }).disableSelection();
  
  var $tab_items = $(".nav-tabs > li", $tabs).droppable({
    accept: ".t_sortable tr",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) { return false; }
  });
});
</script>
- The HTML tables:
<table class="tables_ui" id="t_draggable1"><caption><h4>Table 1</h4></caption>
<tbody class="t_sortable">
  <tr>
    <th>col_1</th>
    <th>col_2</th>  
    <th>col_3</th>  
    <th>col_4</th>  
  </tr>
  <tr>
    <td>156</td>                                                                                         
    <td>2668</td>                                                              
    <td>100.95</td>  
    <td>1.82</td>                                                               
  </tr>
  <tr>
    <td>256</td>                                                                                         
    <td>618</td>                                                              
    <td>10.35</td> 
    <td>1.82</td>                                                             
  </tr>
  <tr>  
    <td>789</td>                                                                                         
    <td>28</td>                                                              
    <td>105.8</td> 
    <td>15.89</td>                                                             
  </tr>
</tbody></table>

<table class="tables_ui" id="t_draggable2"><caption><h4>Table 2</h4></caption>
<tbody class="t_sortable">
   <tr>
    <th>COL_1</th>
    <th>COL_2</th>  
    <th>COL_3</th>  
    <th>COL_4</th>
  </tr>
  <tr> 
    <td>36</td> 
    <td>78</td>
    <td>100.9</td>
    <td>1.82</td>
  </tr>
  <tr>
    <td>236</td> 
    <td>668</td>
    <td>10.95</td> 
    <td>12.80</td>
  </tr>
</tbody></table>
- CSS code to style the tables and the draggable items:
<style type="text/css">
.tables_ui {
  display:inline-block;
  margin:2px 2%;
  border:2px solid #3333fe;
  border-spacing:0;
}
.tables_ui ul li {
  min-width: 200px;
}
.dragging li.ui-state-hover {
  min-width: 240px;
}
.dragging .ui-state-hover a {
  color:green !important;
  font-weight: bold;
}
.tables_ui th,td {
  text-align: right;
  padding: 2px 4px;
  border: 1px solid;
}
.t_sortable tr, .ui-sortable-helper {
  cursor: move;
}
.t_sortable tr:first-child {
  cursor: default;
}
.ui-sortable-placeholder {
  background: yellow;
}
</style>

• Here is the result (Click and drag the table rows from one table to the other):

Table 1

col_1 col_2 col_3 col_4
156 2668 100.95 1.82
256 618 10.35 1.82
789 28 105.8 15.89

Table 2

COL_1 COL_2 COL_3 COL_4
36 78 100.9 1.82
236 668 10.95 12.80

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
jQuery Drag and Drop Rows between two similar Tables

Last accessed pages

  1. SHA512 Encrypt hash in JavaScript (11663)
  2. Send POST data with file_get_contents (720)
  3. Display data from PHP Array, or MySQL in HTML table (14528)
  4. Multiple upload files (806)
  5. Contact page - CoursesWeb (2153)

Popular pages this month

  1. Contact page - CoursesWeb (1639)
  2. Tabs effect with CSS (1625)
  3. Insert, Select and Update NULL value in MySQL (823)
  4. Read Excel file data in PHP - PhpExcelReader (653)
  5. PHP getElementById and getElementsByTagName (414)