jquery - clone the element not the data -
edit: decided not use cloning seems way past level of knowledge. advised not delete question question gonna here.
i have 2 tables, 1 being populated data , empty. using draggable , droppable jquery ui can move data first table other. , working perfectly. now, trying clone "tr" element of second table data being copied when data dropped using .clone() , cloning works except clones data dont want want clone tr element.
this 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 copying , copies data element:
var copy = $(this); copy.closest('tr').clone(true).prependto(copy.closest('.guest-list-table'));
so tried:
var copy = $(this); copy.clone(true).find(":input").val("").end().insertafter(copy);
and copies element excluding data when try drop second data in copied element can't , im stuck.
any help/ideas appreciated , if there different/better approach want do, suggestions appreciated well. thank in advance.
try this:
var $cloned = $("tr").clone().children().text("").end();
Comments
Post a Comment