将表单元素复制/粘贴到新行
我可能会使这个问题变得复杂......我有一个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”行，具体取决于所选内容。
是否有人知道是否可以将.clone（）与.quin（）结合在一起以获取输入值，并将它们复制到新行？我已经尝试了不同的想法，但还没有提出任何有效的方法......但话说回来，我对jQuery并不熟悉。
示例图片：
@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);
});
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？