Question

当我输入输入文字（.item-input）时，它应该在tr的底部添加一个新的table - 它应该从class="template-row"复制并更改类名称为class="row"（底部只有新的动态tr）

如果底部输入为空（新的`tr＆＃39;）

，它也不应该在底部添加新的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

＆＃13;

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);
        }
    });
});

＆＃13;

    .template-row { display: none; }

＆＃13;

<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>

＆＃13;

此代码将在每次填充上一个输入时添加新输入。它每次输入只执行一次。

$(this).data("copied")检查数据属性copied。如果存在，则之前已填充输入并创建新输入。它将属性设置为tr - 名为data-copied="true"的元素。 data是jQuery的attr("data-copied")简写。
clone(true)复制模板和事件。
克隆后，模板类将被删除。

Answer 2

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

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

动态地在表的末尾添加TR

2 个答案: