CODEWITHSUNDEEP
jqueryhtmlclone
NewBee
NewBee

Reputation: 839

Clone and delete selected row to another table

I am tring to clone selected object from one table to another . Till now i am getting the id of selected td to be cloned . Following is the code i am trying.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>  
<style type="text/css"> 
    .row-highlight 
    { 
        background-color: Yellow; 
    } 
</style>  
<script type="text/javascript"> 
    $(function() { 
        var message = $('#message'); 
        var tr = $('#tbl,#tbl2').find('tr'); 
        tr.bind('click', function(event) { 
            var values = ''; 
            tr.removeClass('row-highlight'); 
            var tds = $(this).addClass('row-highlight').find('td'); 


            $.each(tds, function(index, item) { 
               values =  item.id; 
            }); 
            message.html(values);  
        }); 
    }); 
</script> 
</head> 
<body> 
<form> 
<table>
<tr>
  <td>  
   <table id="tbl" style="border: solid 1px black"> 
    <tr> 
        <td id="a"> 
            1 
        </td>           
    </tr> 
    <tr> 
        <td id="b"> 
            2 
        </td>              
    </tr> 
    <tr> 
        <td id="c">  
            3 
        </td>             
    </tr> 
   </table> 
 </td>
   <td>
   <table>
    <tr>
<td><input type="button"name="button one" value=">>" onclick=""</td>
    </tr><tr> 
   <td><input type="button" name="button two" value="<<" onclick=""</td>
   </tr>
   </table>
   </td>
  <td>
    <table id="tbl2" style="border: solid 1px black"> 
    <tr> 
        <td>
        </td>             
     </tr> 
    </table>
  </td>
 </tr>
</table>            
<br /> 
<div id="message"> 
</div> 
</form> 
</body> 
</html>

How to clone and delete the selected item from table "tbl" to "tbl2" onclick function of button "button one " and vise versa on click of button "button two". Thanks in advance.////

Upvotes: 0

Views: 1910

Answers (3)

Anil
Anil

Reputation: 1028

Just use, prepend() , append() methods. These methods will serve your purpose well.

You may use it some way like this:

var row = $(this).closest('tr').html();
$('#otherTable tbody').append('<tr>'+row+'</tr>');

Upvotes: 5

Terry Young
Terry Young

Reputation: 3531

No need to explicitly .clone(), in case that ever came across your mind.

You can avoid rebuilding elements from HTML (as you might lose any event handlers if you are not using event delegation) by directly using .append(), .appendTo(), prepend() or prependTo()

Psuedo-codes:

$A.appendTo($B);
// or
$B.append($A);

Example:

$('tr.highlighted').appendTo( $('#otherTable tbody') );

The reverse also works:

$('#otherTable tbody').append($('tr.highlighted'));

Upvotes: 1

Darth Coder
Darth Coder

Reputation: 1798

prepend() and append() functions should do the trick. Another thing I had tried way back in js with a similar scenario was using document.getElementById(tableIDA) to first get the concerned table and then using tableA.insertRow(rowCountA) [where rowCountA is the row count of Table A], followed by tableA.insertCell() function and lastly, cell.appendChild(). It seems long but its actually very easy and procedural to use. May be this will help your purpose.

Upvotes: 1

Related Questions