本文介绍一种简单方法，实现表格行（tr）的动态克隆和删除，并确保始终保留至少一行。
需求：
- 添加行的按钮选择器：
.addTr - 删除行的按钮选择器：
.removeTr
HTML 结构：
| product | description | action |
|---|---|---|
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
