javascript - 动态在表尾添加TR

Question

当我输入输入文本 (.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");
        }
    });
});

Answer 1

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) 复制模板和事件。
• 克隆后，模板类将被删除。