Javascript 在表的末尾动态添加TR

当我键入输入文本（

.item input

）时，它应该在

表的底部添加一个新的
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>

尝试此操作，它将克隆节点并将其附加到元素

$(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");
        }
    });
});


jquery:
$（文档）.ready（函数（）{
$（'.item input'）。在（'keyup'，函数（e）上{
var itemName=$.trim（$（this.val（））；
如果（itemName.length>0&&$（this）.data（“复制”）==未定义）{
var templateRow=$（“.template row”）.clone（true）.removeClass（'template-row'）.addClass（“row”）；
$（'table'）.append（templateRow）；
$（此）.data（“复制”，true）；
}
});
});
.template行{display:none；}

您需要克隆模板，而不是替换它。@Mouser啊，这是一种工作方式，但对于新的
tr
，它没有将类名从
模板行
重命名为
行
。请随意发布答案just
var templateRow=$（“.template行”）.clone（）
@dfsq是的，可以工作，但是新的动态trWell的类名并没有从模板的一行更改到另一行。我做了一个演示，它对我很有效。不知道为什么它不会为你换班。那很好，谢谢。。
$（this）.data（“复制的”）
是如何工作的？这对我来说是新的。
$(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");
        }
    });
});