Jquery将表行复制到另一个表

时间:2014-02-05 14:26:16

标签: javascript jquery jquery-ui

我在表(1)中有一些表单元素,我想添加到另一个表(2),还有一个jquery ui弹出窗口,其中有一个表(3),其中包含要添加到表(2)的项目。基本上是手动输入的列表或列表,您可以从一些预先输入的项目中进行选择。

我的工作达到了一定的水平但是我现在遇到的问题是当我从弹出列表中添加一个项目时,将其删除并从弹出列表中添加另一个项目,它将项目复制到表格(2)中。 / p>

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

1 个答案:

答案 0 :(得分:0)

您需要从.importitem点击中移出viewquote点击事件。

而不是这个

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

上述代码中发生的情况是,每次单击弹出窗口时,它都会绑定点击事件.importitem。因此,如果您打开弹出窗口3次,.importitem点击事件中的代码将被执行三次。

试试这样:

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

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

查看工作演示here