gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 18:04:40 29 4
gpt4 key购买 nike

我可能把这个复杂化了......我有一个 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”行。

有谁知道是否可以在 jQuery 中结合 .clone() 和 .val() 来获取输入值,并将它们复制到新行?我已经尝试过不同的想法,但还没有想出任何可行的方法……但话又说回来,我对 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>

最佳答案

只存储名称和值怎么样?这是一个可以完成这项工作的示例:

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/

关于javascript - 将表单元素复制/粘贴到新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32280831/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com