Jquery 重复表行opn编辑页

我面临一个小问题。我有一个可以添加和删除表行的表。我基本上是通过克隆一个模板行来实现的，例如

var $tr = $template.clone().removeClass('template').prop('id', tr_id);

我有一个很好的例子来说明这一点

所以我认为一切都很好，但我在Laravel中工作，一旦页面被保存，我就会显示一个编辑页面。“编辑”页面将表格预填充到它所在的位置。因此，如果我添加两行并保存，编辑页面将位于第三行

我已经设置了第二个来尝试演示我的问题。如您所见，这一次如果您删除了其中的行，您将无法再添加新行，因为它要求您添加数据。即使添加数据，也会发生这种情况

我试图弄明白为什么会发生这样的事情，但却没有快乐？如何在编辑页面上使其正常工作

---

谢谢

您的

。tempate

行是表中的最后一行，在删除一行后隐藏。在填充之前不能添加。您的选择器应该忽略它

问题是您的模板在表中，不可见，但不会被忽略，选择器会在添加新行之前检查该模板是否已填充

将添加逻辑更改为以下将解决此问题：

$('#add').on('click', function() {
        $last_row = $('#table1 > tbody  > tr:not(.template)').last();
        if(!hasValues($last_row)){
            alert('You need to insert at least one value in last row before adding');
        } else {
            add_row($('#table1'));
        }
    });

或者，我个人会把任何模板放在一个单独的部分

---

更新加载预填充表时，您还需要通过在ready函数开头添加以下内容来初始化现有行的日期选择器：

$("#table1 .hasDatepicker").removeClass("hasDatepicker");
   $("#table1 tr:not(.template)").find('.dateControl').each(function() {
            $(this).datepicker({
            dateFormat: "dd-mm-yy"          
        });
    });

---

更新的小提琴

非常好，非常感谢。还有最后一件事我还在挣扎。在“编辑”页面上，日期控件不再适用于包含数据的行。是否有任何方法可以确保它持续工作？在末尾添加空行之前，需要为已经存在的行初始化日期选择器。见更新后的帖子。