添加行（克隆）

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《添加行（克隆）》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本文介绍一种简单方法，实现表格行（tr）的动态克隆和删除，并确保始终保留至少一行。

需求：

1. 添加行的按钮选择器：.addTr
2. 删除行的按钮选择器：.removeTr

HTML 结构：

<table class="table table-hover">
  <thead>
    <tr>
      <th>product</th>
      <th>description</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody class="productServicesTbody">
    <tr>
      <td></td>
      <td></td>
      <td><button class="addTr">add</button> <button class="removeTr">delete</button></td>
    </tr>
  </tbody>
</table>

JavaScript 代码 (jQuery):

$(document).ready(function() {
  $(document).on('click', '.addTr', function() {
    let $clone = $(this).closest('tr').clone();
    $clone.find('input').val(''); // 清空克隆行中的输入框 (如有)
    $('.productServicesTbody').append($clone);
  });

  $(document).on('click', '.removeTr', function() {
    if ($('.productServicesTbody tr').length > 1) {
      $(this).closest('tr').remove();
    }
  });
});

代码通过 jQuery 事件委托，监听 .addTr 和 .removeTr 按钮的点击事件。点击 "add" 按钮时，克隆当前行并添加到表格末尾；点击 "delete" 按钮时，如果表格中存在多于一行，则删除当前行。 确保至少保留一行。

如有任何疑问，请在评论区提出。 祝您编码愉快！ #js #jquery

今天关于《添加行（克隆）》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！