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):
$(document).ready(function() {
  var $tabs = $('#t_draggable2')
    connectWith: ".t_sortable",
    items: "> tr:not(:first)",
    appendTo: $tabs,
    zIndex: 999990
  var $tab_items = $(".nav-tabs > li", $tabs).droppable({
    accept: ".t_sortable tr",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) { return false; }
- The HTML tables:
<table class="tables_ui" id="t_draggable1"><caption><h4>Table 1</h4></caption>
<tbody class="t_sortable">

<table class="tables_ui" id="t_draggable2"><caption><h4>Table 2</h4></caption>
<tbody class="t_sortable">
- CSS code to style the tables and the draggable items:
<style type="text/css">
.tables_ui {
  margin:2px 2%;
  border:2px solid #3333fe;
.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;

• 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

36 78 100.9 1.82
236 668 10.95 12.80

Daily Test with Code Example

Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
jQuery Drag and Drop Rows between two similar Tables

Last accessed pages

  1. Dog Mahjong (6631)
  2. Mahjong Games (19943)
  3. Colors In The Sky 2 (1496)
  4. Farm Frenzy2 (384)
  5. Editing, Changing XML - E4X (1061)

Popular pages this month

  1. Flash Games - Free online Games (1360)
  2. Qwop (1158)
  3. Tunnel Rush (1062)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (983)
  5. Drag Racer V3 (758)