2014-02-05 85 views
0

我在表格(1)中添加了一些表单元素,我想将其添加到另一个表格(2),并且还弹出一个jQuery UI,其中包含要添加项目的表格(3)到表(2)。基本上是手动输入的列表或列表,您可以从一些预先输入的项目中进行选择。Jquery将表格行复制到另一个表格

我有这个工作到一定的水平,但我现在的问题是,当我从弹出列表中添加一个项目,删除它,并从弹出列表中添加另一个项目它将项目复制到表(2)。

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

不知道这是表之间复制行的最好方式。当我这样做时,我需要忽略某些列并将添加按钮更改为删除按钮。

$('#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>'); 
}); 

回答

0

你需要迁出的.importitem单击事件出来viewquote点击。

取而代之的是

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

在上面的代码中会发生什么事是每个弹出点击它绑定一个click事件.importitem时间。因此,如果您打开弹出3次代码.importitem点击事件将被执行三次。

尝试这样的:

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

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

见工作演示here

相关问题