Javascript 将表单元素复制/粘贴到新行
我可能把事情复杂化了。。。我有一个jQuery脚本，可以动态添加用户要使用的表单元素：Javascript 将表单元素复制/粘贴到新行,javascript,jquery,forms,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 =
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);
});
<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>
正如@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);
});
});
只存储名称和值如何？下面是一个可以完成这项工作的示例：
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);
});
这里有一个工作示例：我不太清楚您想做什么，当您对js有疑问时，最好做一个小提琴。我已经根据用户代码创建了一个JSFIDLE，请参见这里：@Pluto非常感谢您帮助我描述我的问题！使用.clone的问题在于它复制了唯一的id，因此存在重复的id。我的示例中的一个问题是，如果有多个同名的单选按钮或复选框是有效的HTML，它不会使用它们的值属性来筛选要选中的单选按钮或复选框。这是可以修复的，但您的代码似乎只使用单个复选框而不是复选框组。这对于复制用户刚刚为会话输入的当前元素非常有效，但我希望复制以前保存的元素。如果你用你的代码尝试这个，它只是复制空白行。。。然而，到目前为止，这是最接近的解决方案：您是否可以编辑JSFIDLE，以显示当存在之前的元素时它的外观？我认为它们将与新输入的元素相同。前面的元素只是从sql数据库加载的数据，用于填充表单字段。如果你愿意的话，我可以发布php代码。这很管用，不过最好是一段HTML代码。