当我键入输入文本(.item-input
)时,它应该在table
的底部添加一个新的tr
-它应该从class="template-row"
复制并将类名更改为class="row"
(底部只有新的动态tr
)
如果底部输入为空,它也不应该一直在底部添加新的tr(新的"tr")
出于某种原因,它在表的底部被添加了一次,而class="template-row"
tr在顶部被删除了——这不应该发生吗?
例如:
<style>
.template-row { display: none; }
</style>
<table>
<tr class="template-row">
<td> <input class='item-input' type="text"> </td>
</tr>
<tr class="row">
<td> <input class='item-input' type="text"> </td>
</tr>
</table>
jquery:
$(document).ready(function() {
$('.item-input').on('keydown', function (e) {
var itemName = $.trim($(this).val());
if (itemName != '') {
var templateRow = $(".template-row");
$('table tr:last').after(templateRow).removeClass('template-row').addClass("row");
}
});
});
jquery:
$(document).ready(function() {
$('.item-input').on('keyup', function (e) {
var itemName = $.trim($(this).val());
if (itemName.length > 0 && $(this).data("copied") == undefined ) {
var templateRow = $(".template-row").clone(true).removeClass('template-row').addClass("row");
$('table').append(templateRow);
$(this).data("copied", true);
}
});
});
.template-row { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tr class="template-row">
<td> <input class='item-input' type="text"> </td>
</tr>
<tr class="row">
<td> <input class='item-input' type="text"> </td>
</tr>
</table>
每次填充上一个输入时,此代码都会添加一个新的输入。每个输入只执行一次。
$(this).data("copied")
检查数据属性copied
。如果存在,则输入之前已填充,并创建了新的输入。它为tr
元素设置一个名为:data-copied="true"
的属性。data
实际上是jQuery对attr("data-copied")
的简写clone(true)
复制模板和事件- 克隆后,模板类将被删除
试试这个,它克隆节点并将其附加到元素中。
$(document).ready(function() {
$('.item-input').on('keyup', function (e) {
var itemName = $.trim($(this).val());
if (itemName != '') {
var templateRow = $(".template-row").clone();
templateRow.appendTo('table').removeClass('template-row').addClass("row");
}
});
});