CODEWITHSUNDEEP
jqueryclone
katie hudson
katie hudson

Reputation: 2893

Clone a row if previous row has data

I have the following Fiddle set up. I display a table row to the user. There is the option to add and remove table row.

At the moment, this works fine. Adding a table row makes use of cloning a hidden row.

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

One problem I am having is that I only want it to clone a new row if at least one of the three inputs has some data. So if they are all empty, it should not allow a new row to be added. I have been trying something like this without success

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

How would I make it only allow a new row to be added if at least one of the inputs has a value?

Thanks

Upvotes: 0

Views: 932

Answers (2)

LucioB
LucioB

Reputation: 1764

I would suggest you this approach: first you check for data in rows that you already have, then, if the condition is satisfied, you proceed with adding a new row.

This check looks for at least one filled value, but you can change the hasValues as you want (all of them, none of them and so on).

Change your $('#add').on('click', function())} handler like this:

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

This is the code for hasValues function:

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

Here you have the Fiddle

In this solution I imagined that you want to check only the last row that you already have, but if you want you can loop on each row calling the hasValues passing as argument the current row and it works the same, the only difference you'll need to manage a boolean that considers all the rows and not only the last one.

And of course hasValues is strictly reflecting your table structure, so if you add new fields you'll have to include them.

Upvotes: 1

LoopCoder
LoopCoder

Reputation: 182

Replace your existing code line [means your fiddle code]--

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

With this

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

Upvotes: 1

Related Questions