Question

I have a static Html Table which contains one button “Add” and when clicking on that button it creates a new row which contains some text boxes
and it append to this table .But my Problem is say i have 3 rows and when i click “Add” we are able to create the new ROW but the Previous row values
are copied in to new row that is being generated .Here is the Function That iam using

    $('#btn1').click(function(){
        tr= $("#Tbl tr:last").html();
        num= $('#num').val()*1;
        first= $("#Tbl tr:last").attr('id').substr(4)*1;
        last=first+num;
        for(i=first+1;i<=last;i++) {
            var newtr= tr.replace(first,i);
            $('#Tbl').append('<tr id="txt_'+i+'">'+newtr+'</tr>');
        }   
    });

How do i make the value Selected as “ABC” in Select box when the new Row is being added.Iam using this statement But did not workout .How can i make the value as selected

$('#Tbl tr:last :input').find('input[name="code"]').val('ABC'); 

Answer 1

As @Patrick points out, you may be copying in values from the last row. So why not clear them out after you create the new row? Do this after the for loop:

$('#Tbl tr:last :input').val('');

This should select the input fields in the last tr of the #Tbl table and remove values from them. This will specifically select the last row, but now I see that you’re adding a variable number of rows, so lets handle that properly.

Since you’re appending a bunch of rows, why not clean them up as you add them?

for(i=first+1;i<=last;i++) {
    var newtr= tr.replace(first,i);
    $('#Tbl').append('<tr id="txt_'+i+'">'+newtr+'</tr>').find(':input').val('');
}

That should handle as many rows as you can add.