将表单元素复制/粘贴到新行

时间:2015-08-28 22:47:53

标签: javascript jquery forms

我可能会使这个问题变得复杂......我有一个jQuery脚本,可以动态添加要由用户使用的表单元素:

var i=$('table tr').length;
$(".addmore").on('click',function(){
    addNewRow();
});

$(document).on('keypress', ".addNewRow", function(e){
    var keyCode = e.which ? e.which : e.keyCode;
    if(keyCode == 9 ) addNewRow();
});

var addNewRow = function(id){
    html = '<tr id="tr_'+i+'">';
    html += '<td><input class="case" id="caseNo_'+i+'" type="checkbox"/></td>';
    html += '<td class="prod_c"><input type="text" data-type="productCode" name="data[InvoiceDetail]['+i+'][product_id]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
    html +='<span class="add_icon hide" id="add_icon_'+i+'"> <i class="fa fa-plus-circle"></i></span>';
    html +='</td>';

    html += '<td><input type="text" data-type="productName" name="data[InvoiceDetail]['+i+'][productName]"  id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][price]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';

    html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][quantity]" id="quantity_'+i+'" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">';
    html += '<input type="hidden" id="stock_'+i+'"/>';
    html += '<input type="hidden" id="stockMaintainer_'+i+'" name="data[InvoiceDetail]['+i+'][stockMaintainer]" />';
    html += '<input type="hidden" id="previousQuantity_'+i+'"/>';
    html += '<input type="hidden" id="invoiceDetailId_'+i+'"/>';
    html += '</td>';
    html += '<td><input type="text" id="total_'+i+'" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td><input type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><select name="data[InvoiceDetail][0][location]" id="location_1'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
    html += '<option value="Used">Used</option>';
    html += '<option value="RTS">RTS</option>';
    html += '<option value="LAJ">LAJ</option>';
    html += '</select></td>';
    html += '</tr>';

    if( typeof id !== "undefined"){
        $('#tr_'+id).after(html);
    }else{
        $('table').append(html);
    }




    console.log(id);

    $('#caseNo_'+i).focus();

    i++;
}

//to check all checkboxes
$(document).on('change','#check_all',function(){
    $('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});

//deletes the selected table rows
$(".delete").on('click', function() {
    $('.case:checkbox:checked').parents("tr").remove();
    $('#check_all').prop("checked", false); 
    calculateTotal();
});


$(document).on('blur','.autocomplete_txt',function(){
    //$('.add_icon').addClass('hide');
});

$(document).on('click','.add_icon',function(){
    var add_icon_id = $(this).attr('id');
    var add_icon_arr = add_icon_id.split("_");
    var icon_id = add_icon_arr[add_icon_arr.length-1];
    addNewRow(icon_id);
});

结果输出会在每个订单项旁边放置一个复选框,您可以使用该复选框逐行删除项目。我希望能够使用复选框选择多个元素,并复制这些表单输入,用户输入的数据为“x”行,具体取决于所选内容。

是否有人知道是否可以将.cl​​one()与.quin()结合在一起以获取输入值,并将它们复制到新行?我已经尝试了不同的想法,但还没有提出任何有效的方法......但话说回来,我对jQuery并不熟悉。

示例图片: Example Pic

@Pluto请求的数据库调用输出html片段:

<table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
                                    <th width="20%">Item No</th>
                                    <th width="38%">Item Name</th>
                                    <th width="8%">Price</th>
                                    <th width="8%">Quantity</th>
                                    <th width="8%">Total</th>
                                    <th width="4%">Staged</th>
                                    <th width="12%">Location</th>
                                </tr>
                            </thead>
                            <tbody>
                                                                                                            <tr id="tr_1">
                                            <td> <input class="case" type="checkbox"/> </td>
                                            <td class="prod_c">
                                                <input value="12VOLT:ALPINE:ALPINE AMPLIFIER:PDX-V9" type="text" data-type="productCode" name="data[InvoiceDetail][0][product_id]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off">
                                                <span class="add_icon hide" id="add_icon_1"> <i class="fa fa-plus-circle"></i></span>
                                            </td>
                                            <td><input value="5 Channel Power Density Digital Amplifier" type="text" data-type="productName" name="data[InvoiceDetail][0][productName]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input value="351" type="number" name="data[InvoiceDetail][0][price]" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td>
                                                <input value="1" type="number" name="data[InvoiceDetail][0][quantity]" id="quantity_1" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                                <input value="1"  type="hidden" id="stock_1" autocomplete="off"/>
                                                <input value="0" type="hidden" id="stockMaintainer_1" name="data[InvoiceDetail][0][stockMaintainer]" autocomplete="off"/>
                                                <input value="1" type="hidden" id="previousQuantity_1" autocomplete="off"/>
                                                <input value="2817" type="hidden" id="invoiceDetailId_1" autocomplete="off"/>
                                            </td>
                                            <td><input value="351" type="number" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="checkbox"  data-type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td>
                                            <select value="" name="data[InvoiceDetail][0][location]" id="location_1" class="form-control autocomplete_txt" autocomplete="off">
                                                    <option value="Used" selected>Used</option>
                                                    <option value="RTS" >RTS</option>
                                                    <option value="LAJ" >LAJ</option>
                                            </select>
                                            </td>
                                        </tr>
                                                                            <tr id="tr_2">
                                            <td> <input class="case" type="checkbox"/> </td>
                                            <td class="prod_c">
                                                <input value="12VOLT:ALPINE:SPEAKERS-ALPINE:SPE-5000" type="text" data-type="productCode" name="data[InvoiceDetail][1][product_id]" id="itemNo_2" class="form-control autocomplete_txt" autocomplete="off">
                                                <span class="add_icon hide" id="add_icon_2"> <i class="fa fa-plus-circle"></i></span>
                                            </td>
                                            <td><input value="Alpine Type E 5.25" type="text" data-type="productName" name="data[InvoiceDetail][1][productName]" id="itemName_2" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input value="41" type="number" name="data[InvoiceDetail][1][price]" id="price_2" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td>
                                                <input value="1" type="number" name="data[InvoiceDetail][1][quantity]" id="quantity_2" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                                <input value="6"  type="hidden" id="stock_2" autocomplete="off"/>
                                                <input value="0" type="hidden" id="stockMaintainer_2" name="data[InvoiceDetail][1][stockMaintainer]" autocomplete="off"/>
                                                <input value="1" type="hidden" id="previousQuantity_2" autocomplete="off"/>
                                                <input value="2818" type="hidden" id="invoiceDetailId_2" autocomplete="off"/>
                                            </td>
                                            <td><input value="41" type="number" id="total_2" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="checkbox"  data-type="checkbox" name="data[InvoiceDetail][1][staged]" id="staged_2" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td>
                                            <select value="" name="data[InvoiceDetail][1][location]" id="location_2" class="form-control autocomplete_txt" autocomplete="off">
                                                    <option value="Used" selected>Used</option>
                                                    <option value="RTS" >RTS</option>
                                                    <option value="LAJ" >LAJ</option>
                                            </select>
                                            </td>
                                        </tr>
                                                                            <tr id="tr_3">
                                            <td> <input class="case" type="checkbox"/> </td>
                                            <td class="prod_c">
                                                <input value="12VOLT:ALPINE:HEADUNIT-ALPINE:CDE-143BT" type="text" data-type="productCode" name="data[InvoiceDetail][2][product_id]" id="itemNo_3" class="form-control autocomplete_txt" autocomplete="off">
                                                <span class="add_icon hide" id="add_icon_3"> <i class="fa fa-plus-circle"></i></span>
                                            </td>
                                            <td><input value="Cd/Usb Receiver W/Advanced Bluetooth By Alpine" type="text" data-type="productName" name="data[InvoiceDetail][2][productName]" id="itemName_3" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input value="93" type="number" name="data[InvoiceDetail][2][price]" id="price_3" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td>
                                                <input value="1" type="number" name="data[InvoiceDetail][2][quantity]" id="quantity_3" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                                <input value="0"  type="hidden" id="stock_3" autocomplete="off"/>
                                                <input value="0" type="hidden" id="stockMaintainer_3" name="data[InvoiceDetail][2][stockMaintainer]" autocomplete="off"/>
                                                <input value="1" type="hidden" id="previousQuantity_3" autocomplete="off"/>
                                                <input value="2819" type="hidden" id="invoiceDetailId_3" autocomplete="off"/>
                                            </td>
                                            <td><input value="93" type="number" id="total_3" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="checkbox" checked="checked" data-type="checkbox" name="data[InvoiceDetail][2][staged]" id="staged_3" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td>
                                            <select value="" name="data[InvoiceDetail][2][location]" id="location_3" class="form-control autocomplete_txt" autocomplete="off">
                                                    <option value="Used" >Used</option>
                                                    <option value="RTS" selected>RTS</option>
                                                    <option value="LAJ" >LAJ</option>
                                            </select>
                                            </td>
                                        </tr>
                                                                            <tr id="tr_4">
                                            <td> <input class="case" type="checkbox"/> </td>
                                            <td class="prod_c">
                                                <input value="12VOLT:ALPINE:SPEAKERS-ALPINE:SPE-5000" type="text" data-type="productCode" name="data[InvoiceDetail][3][product_id]" id="itemNo_4" class="form-control autocomplete_txt" autocomplete="off">
                                                <span class="add_icon hide" id="add_icon_4"> <i class="fa fa-plus-circle"></i></span>
                                            </td>
                                            <td><input value="Alpine Type E 5.25" type="text" data-type="productName" name="data[InvoiceDetail][3][productName]" id="itemName_4" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input value="41" type="number" name="data[InvoiceDetail][3][price]" id="price_4" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td>
                                                <input value="1" type="number" name="data[InvoiceDetail][3][quantity]" id="quantity_4" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                                <input value="6"  type="hidden" id="stock_4" autocomplete="off"/>
                                                <input value="0" type="hidden" id="stockMaintainer_4" name="data[InvoiceDetail][3][stockMaintainer]" autocomplete="off"/>
                                                <input value="1" type="hidden" id="previousQuantity_4" autocomplete="off"/>
                                                <input value="2820" type="hidden" id="invoiceDetailId_4" autocomplete="off"/>
                                            </td>
                                            <td><input value="41" type="number" id="total_4" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="checkbox" checked="checked" data-type="checkbox" name="data[InvoiceDetail][3][staged]" id="staged_4" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td>
                                            <select value="" name="data[InvoiceDetail][3][location]" id="location_4" class="form-control autocomplete_txt" autocomplete="off">
                                                    <option value="Used" >Used</option>
                                                    <option value="RTS" >RTS</option>
                                                    <option value="LAJ" selected>LAJ</option>
                                            </select>
                                            </td>
                                        </tr>
                                                                            <tr id="tr_5">
                                            <td> <input class="case" type="checkbox"/> </td>
                                            <td class="prod_c">
                                                <input value="12VOLT:ALPINE:HEADUNIT-ALPINE:CDE-143BT" type="text" data-type="productCode" name="data[InvoiceDetail][4][product_id]" id="itemNo_5" class="form-control autocomplete_txt" autocomplete="off">
                                                <span class="add_icon hide" id="add_icon_5"> <i class="fa fa-plus-circle"></i></span>
                                            </td>
                                            <td><input value="Cd/Usb Receiver W/Advanced Bluetooth By Alpine" type="text" data-type="productName" name="data[InvoiceDetail][4][productName]" id="itemName_5" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input value="93" type="number" name="data[InvoiceDetail][4][price]" id="price_5" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td>
                                                <input value="1" type="number" name="data[InvoiceDetail][4][quantity]" id="quantity_5" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                                <input value="0"  type="hidden" id="stock_5" autocomplete="off"/>
                                                <input value="0" type="hidden" id="stockMaintainer_5" name="data[InvoiceDetail][4][stockMaintainer]" autocomplete="off"/>
                                                <input value="1" type="hidden" id="previousQuantity_5" autocomplete="off"/>
                                                <input value="2821" type="hidden" id="invoiceDetailId_5" autocomplete="off"/>
                                            </td>
                                            <td><input value="93" type="number" id="total_5" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="checkbox"  data-type="checkbox" name="data[InvoiceDetail][4][staged]" id="staged_5" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td>
                                            <select value="" name="data[InvoiceDetail][4][location]" id="location_5" class="form-control autocomplete_txt" autocomplete="off">
                                                    <option value="Used" selected>Used</option>
                                                    <option value="RTS" >RTS</option>
                                                    <option value="LAJ" >LAJ</option>
                                            </select>
                                            </td>
                                        </tr>
                                                                            <tr id="tr_6">
                                            <td> <input class="case" type="checkbox"/> </td>
                                            <td class="prod_c">
                                                <input value="" type="text" data-type="productCode" name="data[InvoiceDetail][5][product_id]" id="itemNo_6" class="form-control autocomplete_txt" autocomplete="off">
                                                <span class="add_icon hide" id="add_icon_6"> <i class="fa fa-plus-circle"></i></span>
                                            </td>
                                            <td><input value="" type="text" data-type="productName" name="data[InvoiceDetail][5][productName]" id="itemName_6" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input value="0" type="number" name="data[InvoiceDetail][5][price]" id="price_6" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td>
                                                <input value="0" type="number" name="data[InvoiceDetail][5][quantity]" id="quantity_6" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                                <input value=""  type="hidden" id="stock_6" autocomplete="off"/>
                                                <input value="0" type="hidden" id="stockMaintainer_6" name="data[InvoiceDetail][5][stockMaintainer]" autocomplete="off"/>
                                                <input value="0" type="hidden" id="previousQuantity_6" autocomplete="off"/>
                                                <input value="2822" type="hidden" id="invoiceDetailId_6" autocomplete="off"/>
                                            </td>
                                            <td><input value="0" type="number" id="total_6" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="checkbox"  data-type="checkbox" name="data[InvoiceDetail][5][staged]" id="staged_6" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td>
                                            <select value="" name="data[InvoiceDetail][5][location]" id="location_6" class="form-control autocomplete_txt" autocomplete="off">
                                                    <option value="Used" >Used</option>
                                                    <option value="RTS" >RTS</option>
                                                    <option value="LAJ" >LAJ</option>
                                            </select>
                                            </td>
                                        </tr>
                                                                            <tr id="tr_7">
                                            <td> <input class="case" type="checkbox"/> </td>
                                            <td class="prod_c">
                                                <input value="" type="text" data-type="productCode" name="data[InvoiceDetail][6][product_id]" id="itemNo_7" class="form-control autocomplete_txt" autocomplete="off">
                                                <span class="add_icon hide" id="add_icon_7"> <i class="fa fa-plus-circle"></i></span>
                                            </td>
                                            <td><input value="" type="text" data-type="productName" name="data[InvoiceDetail][6][productName]" id="itemName_7" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input value="0" type="number" name="data[InvoiceDetail][6][price]" id="price_7" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td>
                                                <input value="0" type="number" name="data[InvoiceDetail][6][quantity]" id="quantity_7" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                                <input value=""  type="hidden" id="stock_7" autocomplete="off"/>
                                                <input value="0" type="hidden" id="stockMaintainer_7" name="data[InvoiceDetail][6][stockMaintainer]" autocomplete="off"/>
                                                <input value="0" type="hidden" id="previousQuantity_7" autocomplete="off"/>
                                                <input value="2823" type="hidden" id="invoiceDetailId_7" autocomplete="off"/>
                                            </td>
                                            <td><input value="0" type="number" id="total_7" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="checkbox"  data-type="checkbox" name="data[InvoiceDetail][6][staged]" id="staged_7" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td>
                                            <select value="" name="data[InvoiceDetail][6][location]" id="location_7" class="form-control autocomplete_txt" autocomplete="off">
                                                    <option value="Used" >Used</option>
                                                    <option value="RTS" >RTS</option>
                                                    <option value="LAJ" >LAJ</option>
                                            </select>
                                            </td>
                                        </tr>
                                                                                                </tbody>
                        </table>

2 个答案:

答案 0 :(得分:4)

如何存储名称和值?这是一个可以完成这项工作的例子:

function getValues(id){
    var inputs=$('#tr_'+id).find('select,input,textarea').filter('[name]');
    var values={};
    for(var i=0; i<inputs.length;i++){
        var cur=inputs[i];
        // Get the end of the name attribute, to leave out the unique id/index
        values[cur.name.match(/\[\w+]$/)||cur.name] = $(cur).is(':checkbox, :radio') ? cur.checked : cur.value;
    }
    return values;
}
function setValues(id,values){
    var inputs=$('#tr_'+id);
    for(var i in values){
        var cur=inputs.find('[name$="'+i+'"]');
        if(cur.is(':checkbox, :radio')) {
            cur.prop('checked', values[i]);
        } else {
            cur.val(values[i]);
        }
    }
}
//copies the selected table rows to new ones
$(".copy").on('click', function() {
    var origs=$('.case:checkbox:checked');
    for(var a=0; a<origs.length; a++) {
        // Places copy at end
        addNewRow();
        var arr = origs.closest('tr')[a].id.split('_');
        var id = arr[arr.length-1];
        var dat = getValues(id);
        setValues(i-1, dat);
    }
    $('#check_all').add(origs).prop("checked", false);
});

我将其设置为使用ID,以便您可以选择要插入行/数据的位置。现在,它只是将值复制到最后添加的行。

以下是一个工作示例:http://jsfiddle.net/y68wuj08/1/

答案 1 :(得分:0)

正如@Pluto指出的那样,我没有解决问题。我编辑至少可以正确地反转数组,这对jQuery很有趣,因为它已经有一段时间了。

$.fn.reverse = [].reverse; //why doesn't jQuery just do this anyway?
$("button.copy").on('click', function(){
    var cases = $("input.case:checkbox:checked");
    var last = cases.last().closest("tr");
    cases.reverse().each(function(index){
        var newRow = $(this).closest("tr").clone();
        last.after(newRow);
    });
});