CODEWITHSUNDEEP
htmljqueryhtml-tableclone
Matthew
Matthew

Reputation: 271

When cloning a table row, how do I only clone one value of the previous inputs instead of all of them?

I have a table that contains inputs in the to add data to my database. In my jquery function I have a click event that submits the data and then it creates a clone of the table row so I can add in another data input. Right now, the clone copies all of the input values from the previous row into the next row, however I only want to copy one value over to the next row.

This is the function I'm using to clone a new row. It copies over the project_id, cost, and hours value. However I only want it to copy over the project_id value.

$('#addRow').click(function(e) {
        const cloneRow = $('#tableData tbody tr').first();
        let data = {
         project_id: $(".project_id").last().val(),
         imp_or_ann: $(".imp_or_ann").last().val(),
         category: $(".category").last().val(),
         cost: $(".cost").last().val(),
         hours: $(".hours").last().val()
    }
        $.ajax({
            url: '/costs_hours',
            type: 'POST',
            data: data
        }).then(
            cloneRow.clone().appendTo('#tableData tbody'),
            $("#next").removeAttr('disabled')
        )

    })

Upvotes: 0

Views: 174

Answers (1)

Gabriel
Gabriel

Reputation: 2190

The easiest way to do that with what you currently have would be to reset the values of the fields. It's not ideal, there are other ways to do this, like using a template (an actual <template> or a hidden regular-<tr>), or constructing the elements programmatically, but it should work.

var newRow=cloneRow.clone().appendTo('#tableData tbody');
newRow.find(".imp_or_ann,.category,.cost,.hours").val(null); //or whatever the default may be

Upvotes: 1

Related Questions