javascript - jQuery 在重置后保留克隆行数

Question

我在弹出窗口中有一个表单，它显示一个带有标题和一行的简单表格，其中有一个 + 按钮，用户可以单击以添加(克隆)一行。

这工作完美，用户提交表单，读取数据 - 没问题。提交后表单将重置:

   $('#entryTable').find("tr:gt(1)").remove(); // keep header and first row
   $('#entryForm')[0].reset();

如果用户立即调用表单，则表单“似乎”正确重置，所有字段看起来都像新的一样。如果用户单击 +(克隆)按钮 - 它会添加之前添加的行数，而不是 1，就好像某些内容(但是什么？？？？？？)没有重置。

我的克隆函数是

 $(".cloneprod_add").on('click', function(e) {
  e.preventDefault();
  var $tr  = $(this).closest('.tr_clone'); //only first row has +
  var idtr= parseInt($tr.attr("id"));   // checked it is always id of row1
  var $clone = $tr.clone(true);
  cindex++;
  $clone.find(':text').val('');
  $clone.attr('id', idtr+(cindex) );  
  $clone.find("*").each(function() {
        var id = this.id || "";
        var match = id.match(regex) || [];
        if (match.length == 3) {
            this.id = match[1] + (cindex);
        }
  });
  $tr.after($clone);
  $("#addline_"+cindex).addClass("uk-hidden"); // remove +
  $("#delline_"+cindex).removeClass("uk-hidden");  // add -
  });

当再次调用表单时，cindex 会正确重置为 0。还有什么应该重置？我的错误在哪里？谢谢您的建议

(编辑)我正在添加表格。我正在使用 UIkit (www.getuikit.com)，一个节点服务器，表单来自 jade 中的模板 - 我从浏览器复制了 HTML

<form id="entryForm" action="" class="uk-form uk-form-stacked" >
<div id="entryDialog" class="uk-modal-dialog uk-modal-dialog-large">
<fieldset data-uk-margin="">
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-margin-small-top">
<div class="uk-form-row"><div class="uk-grid"><div class="uk-width-1-1">
<table id="entryTable" class="uk-table">
  <thead><tr><th>lot</th><th>code</th><th>num</th>
   <th>qte</th><th>unit</th><th>pos</th><th>cont</th>
   <th></th></tr>
  </thead>
  <tbody><tr id="0" class="tr_productclone">
    <td><input type="text" name="lot" id="lot_0" class="lot"></td>
    <td><input type="text" name="code" id="code_0" class="code"></td>
    <td><input type="text" name="num_0" id="num_0" class="num"></td>
    <td><input type="text" name="qte_0" id="qte_0" class="qte"></td>
    <td><select name="unit_0" id="unit_0" class="unit"><option value="items">pezzi</option></select></td>
    <td><select name="pos_0" id="pos_0" class="pos"><option value="1">piece1</option></select></td>
    <td><select name="cont_0" id="cont_0" class="cont"></select></td>
    <td><button id="addline_0" class="uk-button cloneprod_add"></button>
      <button id="delline_0" class="uk-button cloneprod_del"></button></td>
  </tr>
 </tbody></table></div></div></div></div>
 <div class="uk-modal-footer"><button id="btnSave" type="submit" class="uk-button ">save</button></div>
  </fieldset></div></form>

Answer 1

我找到了解决问题的方法。我不知道为什么和如何，但至少它有效。

我的印象是，删除保留了克隆行数的信息，因此将该数字放回原处。我想过在模态中重新加载表格，这样它就会“新鲜无内存”。

最后，我把表的定义写在了js脚本中，而不是写在了Jade模板中。该表在调用表单时会随着时间的推移而重建，并且不会再出现内存鬼影。

它有效，但我仍然不明白为什么那些鬼魂。