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 HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
jQuery Drag and Drop Rows between two similar Tables

Last accessed pages

  1. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (41724)
  2. Get Duration of Audio /Video file before Upload (5913)
  3. Follow the mouse cursor with a DIV inside a Parent (2703)
  4. Register and show online users and visitors (23278)
  5. Node.js Move and Copy Directory (1127)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (390)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (332)
  3. Register and show online users and visitors (302)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (234)
  5. Insert, Select and Update NULL value in MySQL (223)