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 is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li><ul>
<li>http://coursesweb.net/html/</li>
<li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block.some_class {
display: list-item;
}Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net