编辑页面上有重复的 table 行

Question

我遇到了一个小问题。我有一个 table，我可以在其中添加和删除 table 行。我通过基本上克隆模板行来做到这一点，例如

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

我有一个 FIDDLE 显示这个工作完美。

所以我认为一切都很好，但我在 Laravel 中工作，保存页面后我会显示一个编辑页面。编辑页面将 table 预填充到它所在的位置。所以如果我添加两行并保存，编辑页面将在第三行。

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

我想弄清楚为什么会发生这种情况但没有快乐？我怎样才能让它在编辑页面上正常工作？

谢谢

Answer 1

您的 .tempate 行是 table 中的最后一行，并且在您删除一行后隐藏。你不能添加，直到你填满它。你的选择器应该忽略它。

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

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

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

或者，我会亲自将任何模板放在单独的部分中。

Update 您还需要在加载预填充的 table 时为现有行初始化日期选择器，方法是在就绪函数的开头添加以下内容:

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

已更新 fiddle https://jsfiddle.net/cLssk6bv/5/

编辑页面上有重复的 table 行

Duplicate table row opn edit page

jquery

jquery-clone