使用JavaScript在HTML中添加动态行 [英] Adding dynamic rows in html with javascript
本文介绍了使用JavaScript在HTML中添加动态行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试以下.js代码，该代码为我动态地将表单字段添加到页面中:
I am experimenting with the following .js code that adds form field dynamically to a page for me :
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++;
}
它运行完美，我能够根据需要添加产品线.
It works perfectly, and I am able to add product lines in as needed.
但是，我希望能够在现有行之间添加行.
有人知道我会怎么做吗?
HOWEVER, I would like to be able to add rows IN BETWEEN existing rows.
Does anyone know how I would do that?
现在，代码执行如下:
Apples
Bananas
Oranges
添加行(按钮)
Apples
Bananas
Oranges
New Item
我希望它在需要时可以这样工作:
I want it to work like this when needed :
Apples
New Item
Bananas
Oranges
可能通过每行旁边的图标，单击以在该项目的上方或下方添加一行.
Possibly via a icon next to each row, that you click on to add a row above or below said item.
表格样本:
<?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)，以便用户在以后重要的时候可以决定更改顺序.
You could also consider making these rows sortable (with jQueryUI) so the user can decide to change the order later if that's important.
否则，请考虑对代码的这种修改概念:
Otherwise think about this modification concept of your code:
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');
要保留数字顺序，如下所示:
To preserve numerical orders something like this:
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能够一起使用...
OP wanted even more of the jQuery to see how it might all work together...
// 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();
});
这篇关于使用JavaScript在HTML中添加动态行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
