Cloning between 2 tables
Hi all
The problem statement follows:
Using jQuery, I need to copy, rows, one at at time, by dragging from table1 to table2, leaving the row unchanged in table1.
On dropping in table2, I need to add 2 new columns to the row dropped in table2.
The rows need to be drag/dropped in table2 to rearrange the row order.
The OK adds a new data column to table2 for sending to a server. This column will later be hidden.
The attached code works nicely.
BUT
The problem is that if the drop mistakenly occurs before the mouse is over table2, the columns are added to table1.
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<!--
<link rel='stylesheet' href='style/jquery-ui.css'>
-->
<script src='jquery-1.11.0.min.js'></script>
<script src='jquery-ui.min.js'></script>
<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: left;
padding: 2px 4px;
border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
cursor: move;
}
.connectedSortable tr:first-child {
cursor: default;
}
.ui-sortable-placeholder {
background: yellow;
}
.ui-layout-center {
width: 400px;
height: 300px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
</style>
<script>
function dorows() {
$('#sortable2').find('tr').each(function(index){
if (index > 0) {
$('#sortable2 tr').eq(index).find('td').eq(5).remove(); //Remove data column if exists
var valID = $('#sortable2 tr').eq(index).find('td').eq(2).html();
var valNext = $('#sortable2 tr').eq(index).find('input').val();
$(this).append("<td><input style='cursor: default;' name='namedata' value='" + index + '~' + valID + '~' + valNext + "' /></td>");
}
});
}
$(document).ready(function() {
$("#sortable1").sortable({
connectWith: ".connectedSortable",
helper: function (e, tr) {
this.copyHelper = tr.clone().insertAfter(tr);
$(this).data('copied', false);
$(this).find('tr').each(function(index){
});
tr.append("<td><input style='cursor: default;' value='0' /></td>");
tr.append("<td><a style='cursor: default;' onclick='deleterow($(this));'>Delete</a></td>");
return tr.clone();
},
stop: function () {
var copied = $(this).data('copied');
if (copied) {
$('#initial').remove(); //Remove initial row
}
if (!copied) {
this.copyHelper.remove();
}
this.copyHelper = null;
}
});
$("#sortable2").sortable({
receive: function (e, ui) {
ui.sender.data('copied', true);
}
});
//To add order number of rows as text
$( "#sortable2" ).sortable({ //Only done when table2 is reearranged
stop: function( event, ui ){
$(this).find('tr').each(function(index){
});
}
});
$('form').on('submit', function (e) {
e.preventDefault();
});
});
function deleterow(row) {
row.closest('tr').remove();
}
</script>
</head>
<body>
<table class="tables_ui">
<caption><h4>Existing names</h4></caption>
<tbody id="sortable1" class="connectedSortable">
<tr>
<th>Number</th>
<th>Name</th>
<th>ID</th>
</tr>
<tr>
<td>S03</td>
<td>Name3</td>
<td>ID4</td>
</tr>
<tr>
<td>S01</td>
<td>Name1</td>
<td>ID2</td>
</tr>
<tr>
<td>S02</td>
<td>Name2</td>
<td>ID6</td>
</tr>
</tbody></table>
<table class="tables_ui">
<caption><h4>When names are arranged in order to create a sequence, enter the time to the previous name in minutes. Then click OK.</h4></caption>
<tbody id="sortable2" class="connectedSortable">
<tr>
<th>Number</th>
<th>Name</th>
<th>ID</th>
<th>Time in minutes to previous name</th>
<th>Delete</th>
</tr>
<tr id='initial'>
<td colspan='5' style='width: 300px;'>Drop and rearrange names here</td>
</tr>
</tbody>
</table>
<form>
<input type='submit' value='OK' onclick='dorows();' />
</form>
</body>
</html>
The problem statement follows:
Using jQuery, I need to copy, rows, one at at time, by dragging from table1 to table2, leaving the row unchanged in table1.
On dropping in table2, I need to add 2 new columns to the row dropped in table2.
The rows need to be drag/dropped in table2 to rearrange the row order.
The OK adds a new data column to table2 for sending to a server. This column will later be hidden.
The attached code works nicely.
BUT
The problem is that if the drop mistakenly occurs before the mouse is over table2, the columns are added to table1.
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<!--
<link rel='stylesheet' href='style/jquery-ui.css'>
-->
<script src='jquery-1.11.0.min.js'></script>
<script src='jquery-ui.min.js'></script>
<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: left;
padding: 2px 4px;
border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
cursor: move;
}
.connectedSortable tr:first-child {
cursor: default;
}
.ui-sortable-placeholder {
background: yellow;
}
.ui-layout-center {
width: 400px;
height: 300px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
</style>
<script>
function dorows() {
$('#sortable2').find('tr').each(function(index){
if (index > 0) {
$('#sortable2 tr').eq(index).find('td').eq(5).remove(); //Remove data column if exists
var valID = $('#sortable2 tr').eq(index).find('td').eq(2).html();
var valNext = $('#sortable2 tr').eq(index).find('input').val();
$(this).append("<td><input style='cursor: default;' name='namedata' value='" + index + '~' + valID + '~' + valNext + "' /></td>");
}
});
}
$(document).ready(function() {
$("#sortable1").sortable({
connectWith: ".connectedSortable",
helper: function (e, tr) {
this.copyHelper = tr.clone().insertAfter(tr);
$(this).data('copied', false);
$(this).find('tr').each(function(index){
});
tr.append("<td><input style='cursor: default;' value='0' /></td>");
tr.append("<td><a style='cursor: default;' onclick='deleterow($(this));'>Delete</a></td>");
return tr.clone();
},
stop: function () {
var copied = $(this).data('copied');
if (copied) {
$('#initial').remove(); //Remove initial row
}
if (!copied) {
this.copyHelper.remove();
}
this.copyHelper = null;
}
});
$("#sortable2").sortable({
receive: function (e, ui) {
ui.sender.data('copied', true);
}
});
//To add order number of rows as text
$( "#sortable2" ).sortable({ //Only done when table2 is reearranged
stop: function( event, ui ){
$(this).find('tr').each(function(index){
});
}
});
$('form').on('submit', function (e) {
e.preventDefault();
});
});
function deleterow(row) {
row.closest('tr').remove();
}
</script>
</head>
<body>
<table class="tables_ui">
<caption><h4>Existing names</h4></caption>
<tbody id="sortable1" class="connectedSortable">
<tr>
<th>Number</th>
<th>Name</th>
<th>ID</th>
</tr>
<tr>
<td>S03</td>
<td>Name3</td>
<td>ID4</td>
</tr>
<tr>
<td>S01</td>
<td>Name1</td>
<td>ID2</td>
</tr>
<tr>
<td>S02</td>
<td>Name2</td>
<td>ID6</td>
</tr>
</tbody></table>
<table class="tables_ui">
<caption><h4>When names are arranged in order to create a sequence, enter the time to the previous name in minutes. Then click OK.</h4></caption>
<tbody id="sortable2" class="connectedSortable">
<tr>
<th>Number</th>
<th>Name</th>
<th>ID</th>
<th>Time in minutes to previous name</th>
<th>Delete</th>
</tr>
<tr id='initial'>
<td colspan='5' style='width: 300px;'>Drop and rearrange names here</td>
</tr>
</tbody>
</table>
<form>
<input type='submit' value='OK' onclick='dorows();' />
</form>
</body>
</html>