Javascript jQuery在重置后保留克隆行数
我在弹出窗口中有一个表单,它显示了一个简单的表,表头有一行,用户可以单击+按钮添加(克隆)一行 这是完美的,用户提交表单,数据被读取-没有问题。 提交后,表格将重置为:Javascript jQuery在重置后保留克隆行数,javascript,jquery,forms,Javascript,Jquery,Forms,我在弹出窗口中有一个表单,它显示了一个简单的表,表头有一行,用户可以单击+按钮添加(克隆)一行 这是完美的,用户提交表单,数据被读取-没有问题。 提交后,表格将重置为: $('#entryTable').find("tr:gt(1)").remove(); // keep header and first row $('#entryForm')[0].reset(); 如果用户立即调用表单,则表单“似乎”已正确重置,所有字段看起来都是新的。 如果用户单击+(克隆)按钮-它会添加以前
$('#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>
lotcodenum
qteunitposcont
佩齐
第一件
拯救
我找到了解决问题的方法。我不知道原因和方法,但至少它是有效的
我的印象是,删除操作保留了克隆行数的信息,因此将该数字放回原处。我考虑在模态中重新加载表,这样它将是“没有记忆的新鲜”
最后,我在js脚本中编写了表的定义,而不是在Jade模板中。当窗体被调用时,表将被重建,不再有内存重影
这是可行的,但我仍然不明白为什么会有这些鬼魂。我找到了解决问题的办法。我不知道原因和方法,但至少它是有效的 我的印象是,删除操作保留了克隆行数的信息,因此将该数字放回原处。我考虑在模态中重新加载表,这样它将是“没有记忆的新鲜” 最后,我在js脚本中编写了表的定义,而不是在Jade模板中。当窗体被调用时,表将被重建,不再有内存重影
它可以工作,但我仍然不明白为什么会出现这些重影。你能在这里显示HTML代码吗,只是表单部分?你能将它添加到吗?这是我复制代码的小提琴,但它不工作,我不知道如何在JSFIDLE中工作,我去掉了uikit,但似乎找不到jQuery?你能在这里显示HTML代码吗,只是表单部分?你能把它添加到吗?这是我复制代码的小提琴,但它不工作,我不知道如何在JSFIDLE中工作,我去掉了uikit,但似乎找不到jQuery?