如果前一行有数据，则克隆一行

Question

我有以下 Fiddle 设置。我向用户显示 table 行。可以选择添加和删除 table 行。

目前，这工作正常。添加 table 行使用克隆隐藏行。

function add_row($table) {
    var tr_id = $table.find('tr').length - 1;
    var $template = $table.find('tr.template');

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

    $tr.find(':input').each(function() {
        if($(this).hasClass('hasDatepicker')) {
            $(this).removeClass('hasDatepicker').removeData('datepicker');
        }

        var input_id = $(this).prop('id');
        input_id = input_id + tr_id;
        $(this).prop('id', input_id);

        var new_name = $(this).prop('name');
        new_name = new_name.replace('[0]', '['+ tr_id +']');
        $(this).prop('name', new_name);

        $(this).prop('value', '');
    });
    $table.find('tbody').append($tr);

    $(".dateControl", $tr).datepicker({
        dateFormat: "dd-mm-yy"
    });

    $(".selectType", $tr).select2({
        tags: true
    });
}

我遇到的一个问题是，如果三个输入中至少有一个有一些数据，我只希望它克隆一个新行。所以如果他们是全部为空，不应允许添加新行。我一直在尝试这样的事情但没有成功

$('#table1 > tbody  > tr').each(function() {
    var inputsVal = $('td:eq(0) input', this).val();
    alert(inputsVal);
});

如果至少有一个输入有值，我如何让它只允许添加一个新行？

谢谢

Answer 1

替换您现有的代码行[意味着您的 fiddle 代码]--

$table.find('tbody').append($tr);

有了这个

var trs=$("#table1").find("tbody").find("tr");
var trslength=trs.length-1;

if($("#campInput"+trslength).val()!=""||$("#dateInput"+trslength).val()!=""|| $("#additionalInput"+trslength).val()!="")
{
    $table.find('tbody').append($tr);
}

Answer 2

我建议您采用这种方法：首先检查已有行中的数据，然后，如果满足条件，则继续添加新行。

此检查会查找至少一个填充值，但您可以根据需要更改 hasValues（所有这些，none 等等）。

像这样更改您的 $('#add').on('click', function())} 处理程序：

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

这是 hasValues 函数的代码：

function hasValues($row){
    $optVal = $row.find('td option:selected').text();
    $inputVal = $row.find('td input').val();
    $textVal = $row.find('td textarea').val();
    if($optVal != "" || $inputVal != "" || $textVal != ""){
            return true;
    } else {
            return false;
    }
}

这里有 Fiddle

在这个解决方案中，我想你只想检查你已经拥有的最后一行，但是如果你想你可以在每一行上循环调用 hasValues 作为当前行的参数传递，它的工作原理是一样的，唯一的区别是您需要管理一个考虑所有行而不仅仅是最后一行的布尔值。

当然 hasValues 严格反映了您的 table 结构，因此如果您添加新字段，则必须包含它们。

如果前一行有数据，则克隆一行

Clone a row if previous row has data

jquery

clone