復制/粘貼表單元素到新行
[英]Copy/Paste Form Elements to new lines
問題描述
我可能使這個問題過於復雜...我有一個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。
圖片示例：
@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 個解決方案
解決方案1
4 已采納 2015-09-04 20:50:43
僅存儲名稱和值怎么樣？ 這是可以完成此工作的示例：
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/
解決方案2
0 2015-09-04 20:17:42
正如@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);
});
});
從剪貼板將多行文本粘貼到PHP形式的多行中
[英]Paste from clipboard multiple lines of text into multiple lines in PHP form
使用 Javascript 操作 DOM，對多個元素執行相同操作，無需復制粘貼
[英]Manipulate DOM with Javascript, do the same for multiple elements without copy paste
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.