Question

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

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

我有一个FIDDLE，表明这完美无缺。

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

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

我想弄清楚为什么会这样，但没有快乐？我怎样才能在编辑页面上正常工作？

由于

Answer 1

您的.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函数的开头添加以下内容来加载预先填充的表时，还需要初始化现有行的datepicker：

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

更新了小提琴https://jsfiddle.net/cLssk6bv/5/

重复的表行opn编辑页面

1 个答案: