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.////

回答1:

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>');

回答2:

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.

回答3:

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'));

来源：https://stackoverflow.com/questions/16144508/clone-and-delete-selected-row-to-another-table

标签

jquery

html

clone