1

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

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

我有一个FIDDLE可以完美地展示它。

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

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

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

谢谢

4

1 回答 1

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

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

更新当您加载预填充表时，您还需要初始化现有行的日期选择器，方法是在准备好的函数的开头添加以下内容：

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

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

于 2016-05-19T08:24:05.103 回答