jQuery将表行复制到另一个表

Question

I have some form elements in a table(1) that I would like add to another table(2) and also a jquery ui pop up that has a table(3) with items to add to table(2). Basically a manually entered list or a list you can choose from some pre entered items.

I have this working to a certain level however the problem I have now is when I add an item from the pop up list, remove it and add another item from the pop list it duplicates the items into table(2).

http://jsfiddle.net/b5mmf/1/

Not sure this is the best way of copying rows between tables. As when I do this I need to ignore certain columns and change the add button to a delete button.

 $('#viewquote').click(function() {
        $('#dialog-confirm').dialog({
        resizable: false,
        maxWidth:920,
                maxHeight: 'auto',
                width: 920,
                height: 'auto',
        modal: true,
        buttons: {
        Ok: function() {
        $( this ).dialog( "close" );

        },

        }
        }); 
 $('.importitem').click(function(){

    var quoterow = $(this).closest('tr').html();
    var quoterowid = $(this).closest('tr').attr('id');


    $("#"+quoterowid+" img").css("display", "block");

 $('#purchaseitemstable tbody').append('<tr id='+quoterowid+'>'+quoterow+'</tr>');
$("#purchaseitemstable td[id*='ignore']").html("");
$("#purchaseitemstable td[id*='button']").html("<input name='deleteitem' type='button' class='deleteitem'  value='Remove' />");

});         
});


 $(document).on('click', '.deleteitem' , function() {
        var quoterow ="";
        var removeitemid = $(this).closest('tr').attr('id');


        $('#'+ removeitemid).remove();
});


var count = 0;
    $('.additem').click(function() {

        var newitemqty = $("#purchaseitemsqty").val();
        var newitemdescription = $("#purchaseitemsdescription").val();
        var newitemcost = $("#purchaseitemscost").val();
        var newitemmancode = $("#purchaseitemsmancode").val();
        count++;

    $('#purchaseitemstable tbody').append('<tr id=item_'+ count +'><td   valign="top">\
    <input name="purchaseitemsqty" value="'+newitemqty+'" size="5" type="text"  ></td>\
    <td  valign="top"><input type="text" name="purchaseitemsdescription" value="'+newitemdescription+'" ></td>\
 <td valign="top"> <input type="text" name="purchaseitemsmancode" id="purchaseitemsmancode" value="'+newitemmancode+'"> </td> <td  valign="top"><input name="purchaseitemscost" value="'+newitemcost+'" size="7" type="text"><div> <input name="deleteitem" type="button" class="deleteitem"  value="Remove" /></div></td></tr>');
 });

Answer 1

You need to move out the click event of .importitem out of viewquote click.

Instead of this

$('#viewquote').click(function() {
    $('#dialog-confirm').dialog('open');        
        $('.importitem').click(function(){
           ..................
           ....................
        });
});

What happens in the above code is each time the pop up is clicked it binds a click event .importitem . So if you open popup 3 times the code in the .importitem click event will be executed three times.

Try like this :

$('#viewquote').click(function() {
    $('#dialog-confirm').dialog('open');        
});

$('.importitem').click(function(){
.........
.........
});

See working demo here