在表末尾动态添加TR

Add TR at the end of table dynamically

本文关键字：添加 TR 动态      更新时间：2023-09-26

当我键入输入文本（.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");
        }
    });
});
相关文章：