我正在尝试以下.js代码,这些代码为我动态地将表单字段添加到页面中:
var i=$('table tr').length;
$(".addmore").on('click',function(){
addNewRow();
});
$(".addmany").on('click',function(){
addNewRow();
addNewRow();
});
$(document).on('keypress', ".addNewRow", function(e){
var keyCode = e.which ? e.which : e.keyCode;
if(keyCode == 9 ) addNewRow();
});
var addNewRow = function(){
html = '<tr>';
html += '<td><input class="case" id="caseNo_'+i+'" type="checkbox"/></td>';
html += '<td><input type="text" data-type="productCode" name="data[InvoiceDetail]['+i+'][product_id]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></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" data-type="staged" name="data[InvoiceDetail]['+i+'][staged]" id="staged_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '</tr>';
$('table').append(html);
$('#caseNo_'+i).focus();
i++;
}
它运行完美,我能够根据需要添加产品线。
但是,我希望能够在现有行之间添加行。
有人知道我会怎么做吗?
现在,代码执行如下:
Apples
Bananas
Oranges
添加行(按钮)
Apples
Bananas
Oranges
New Item
我希望它在需要时可以这样工作:
Apples
New Item
Bananas
Oranges
您可能会通过每行旁边的图标来单击,以在该项目的上方或下方添加一行。
表格样本:
<?php if(isset($invoice['InvoiceDetail'])&&!empty($invoice['InvoiceDetail'])){?>
<?php foreach ( $invoice['InvoiceDetail'] as $key=>$item){?>
<tr>
<td> <input class="case" type="checkbox"/> </td>
<td><input value="<?php echo isset($item['product_id']) ? $item['product_id']: ''; ?>" type="text" data-type="productCode" name="data[InvoiceDetail][<?php echo $key;?>][product_id]" id="itemNo_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input value="<?php echo isset($item['productName']) ? $item['productName']: ''; ?>" type="text" data-type="productName" name="data[InvoiceDetail][<?php echo $key;?>][productName]" id="itemName_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input value="<?php echo isset($item['price']) ? $item['price']: ''; ?>" type="number" name="data[InvoiceDetail][<?php echo $key;?>][price]" id="price_<?php echo $key+1?>" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td>
<input value="<?php echo isset($item['quantity']) ? $item['quantity']: ''; ?>" type="number" name="data[InvoiceDetail][<?php echo $key;?>][quantity]" id="quantity_<?php echo $key+1?>" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<input value="<?php echo isset($item['quantityInStock']) ? $item['quantityInStock']: ''; ?>" type="hidden" id="stock_<?php echo $key+1?>" autocomplete="off"/>
<input value="0" type="hidden" id="stockMaintainer_<?php echo $key+1?>" name="data[InvoiceDetail][<?php echo $key;?>][stockMaintainer]" autocomplete="off"/>
<input value="<?php echo isset($item['quantity']) ? $item['quantity']: ''; ?>" type="hidden" id="previousQuantity_<?php echo $key+1?>" autocomplete="off"/>
<input value="<?php echo isset($item['id']) ? $item['id']: ''; ?>" type="hidden" id="invoiceDetailId_<?php echo $key+1?>" autocomplete="off"/>
</td>
<td><input value="<?php echo $item['price']*$item['quantity']; ?>" type="number" id="total_<?php echo $key+1?>" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="checkbox" <?php if(isset($item['staged']) && $item['staged'] == 1) echo "checked=\"checked\""?> data-type="checkbox" name="data[InvoiceDetail][<?php echo $key;?>][staged]" id="staged_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td>
</tr>
<?php } ?>
<?php }else{?>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><input type="text" data-type="productCode" name="data[InvoiceDetail][0][product_id]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="text" data-type="productName" name="data[InvoiceDetail][0][productName]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input 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 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 type="hidden" id="stock_1" autocomplete="off"/>
<input type="hidden" name="data[InvoiceDetail][0][stockMaintainer]" id="stockMaintainer_1" autocomplete="off"/>
<input type="hidden" id="previousQuantity_1" autocomplete="off"/>
<input type="hidden" id="invoiceDetailId_1" autocomplete="off"/>
</td>
<td><input type="number" id="total_1" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input value="1" type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1" class="form-control autocomplete_txt" autocomplete="off"></td>
</tr>
<?php } ?>
您也可以考虑使这些行可排序(使用jQueryUI),以便用户在以后重要的时候可以决定更改顺序。
否则,请考虑以下代码修改概念:
var addNewRow = function(element, type) {
var html = '<tr>' // etc ....
(type == 'after') ? element.after(html) : element.append(html);
$('#caseNo_'+i).focus();
i++;
}
// Where ever you're doing this now..
addNewRow($('table'), 'append');
// maybe in click rule of (I am assuming - nested) icon in your TR, use .closest('tr') to get the element.
addNewRow($(this).closest('tr'), 'after');
要保留数字顺序,如下所示:
var reOrder = function() {
var table = $('table');
table.children('tr').each(function(){
var tr = $(this);
var i = table.index(tr) + 1; // because index starts at 0
tr.attr('data-some-attribute', 'new_value_'+i);
}
};
OP希望更多的jQuery能够一起使用...
// Define Vars
var table = $('table'); // try to make this more specific of a selector../
var addRowButton = $('#specific-button');
// This function, with missing parts "etc" added in:
var addNewRow = function(element, type) {
var html = '<tr>' // etc ....
// don't forget to add the "add row button" html to this also
(type == 'after') element.after(html) : element.append(html);
$('#caseNo_'+i).focus();
i++;
};
// Re Order table to preserve row numbering
var reOrder = function() {
table.children('tr').each(function(){
var tr = $(this);
var i = table.index(tr) + 1; // because index starts at 0
tr.attr('data-some-attribute', 'new_value_'+i);
}
};
// You have 1 add row button:
addRowButton.click(function(){
// Call to addNewRow
addNewRow(table, 'append');
});
// I assume you'll nest your buttons to add a row below in your current row..
table.find('.add-row-button').click(function(){
// Call to add row
addNewRow($(this).closest('tr'), 'after');
// Call to reOrder table
reOrder();
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句