I have two tables, one being populated by data and another empty. I am using draggable and droppable jquery ui so I can move data from the first table to the other. and its working perfectly. Now, I am trying to clone the "tr" element of the second table where data is being copied when data is dropped using .clone()
and the cloning works except it clones the data as well which i dont want i just want to clone the tr element.
this is the html
<div id="contact-list">
<table class="contact-list-table">
<thead>
<th>Name</th>
</thead>
<tbody>
<tr id="1"><td>Nora Marzuki</td></tr>
<tr id="2"><td>Tunku Imran</td></tr>
<tr id="3"><td>Iman Nong</td></tr>
</tbody>
</table>
</div>
<div id="guest-list">
<table class="guest-list-table">
<thead>
<th>Guest</th>
</thead>
<tbody>
<form>
<tr><td><input name="guest" readonly /></td></tr>
</form>
</tbody>
</table>
</div>
jquery
<script type="text/javascript">
$(document).ready(function(){
var c = {};
$("#contact-list tr").draggable({
helper: "clone",
start: function(event, ui) {
c.tr = this;
c.helper = ui.helper;
}
});
$("#guest-list tr").droppable({
drop: function(event, ui) {
var guest = ui.draggable.text();
var copy = $(this);
$(this).find("input").val(guest);
copy.closest('tr').clone(true).prependTo(copy.closest('.guest-list-table'));
$(c.tr).remove();
$(c.helper).remove();
}
});
});
</script>
This line is for the copying and it copies the data as well as the element:
var copy = $(this);
copy.closest('tr').clone(true).prependTo(copy.closest('.guest-list-table'));
so then i tried:
var copy = $(this);
copy.clone(true).find(":input").val("").end().insertAfter(copy);
and it copies the element excluding the data but then when i try to drop a second data in the copied element i can't and this is where im stuck.
any help/ideas is much appreciated and if there is a different/better approach to what i want to do, suggestions are appreciated as well. thank you in advance.