使用javascript在html中添加动态行

我正在尝试以下.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 = ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; $('table').append(html); $('#caseNo_'+i).focus(); i++; } 

它工作得很好，我可以根据需要添加产品线。

但是，我希望能够在BETWEEN现有行中添加行。
有谁知道我会怎么做？

现在代码执行如下：

 Apples Bananas Oranges 

添加行（按钮）

 Apples Bananas Oranges New Item 

我希望它在需要时像这样工作：

 Apples New Item Bananas Oranges 

可能通过每行旁边的图标，您单击以在所述项目的上方或下方添加一行。

表格样本：

  $item){?>     <input value="" type="text" data-type="productCode" name="data[InvoiceDetail][][product_id]" id="itemNo_" class="form-control autocomplete_txt" autocomplete="off"> <input value="" type="text" data-type="productName" name="data[InvoiceDetail][][productName]" id="itemName_" class="form-control autocomplete_txt" autocomplete="off"> <input value="" type="number" name="data[InvoiceDetail][][price]" id="price_" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">  <input value="" type="number" name="data[InvoiceDetail][][quantity]" id="quantity_" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"> <input value="" type="hidden" id="stock_" autocomplete="off"/> <input value="0" type="hidden" id="stockMaintainer_" name="data[InvoiceDetail][][stockMaintainer]" autocomplete="off"/> <input value="" type="hidden" id="previousQuantity_" autocomplete="off"/> <input value="" type="hidden" id="invoiceDetailId_" autocomplete="off"/>  <input value="" type="number" id="total_" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"> <input type="checkbox"  data-type="checkbox" name="data[InvoiceDetail][][staged]" id="staged_" class="form-control autocomplete_txt" autocomplete="off">                    

Answer 1

您还可以考虑使这些行可排序 （使用jQueryUI），以便用户可以决定稍后更改顺序（如果这很重要）。

否则考虑一下代码的这个修改概念 ：

 var addNewRow = function(element, type) { var html = '' // 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 = '' // 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(); });