What is the Otherway of adding a row to the Existing Html Table(jquery)

iam adding no of rows to the Existing Html table based on the value inputted from user in a textbox.

$('#btn_add').click(function(){                 
            //This would ge开发者_高级运维t the complete last row in the html table 
            tr= $("#tbl tr:last").html();
            //This is the input for the no of rows  
            num= $('#noofrowstxtbox').val()*1;          
            //This would give the last row value .Say if 2 rows are there in a table it would give "2"
            x = $("#tbltr:last").attr('id').substr(4)*1;
            //Say for x is "2" and the rows we want to add is "1" then last will become "3"
            last=x+num;                                 
            for(i=x+1;i<=last;i++) {
                var newtr= tr.replace(x,i); 
                newtr= newtr.replace('sno'+x,'sno'+i);              
                newtr= newtr.replace('sname'+x,'sname'+i);
                newtr= newtr.replace('saddress'+x,'saddress'+i);
                $('#tbl').append('<tr id="st_'+i+'">'+newtr+'</tr>');
            }

but Here iam Replacing the last row and adding it .Is there any way to do more efficiently

Something like

$("#btn-add").click(function(){
    var noOfRowsToBeAdded = parseInt($("#noofrowstxtbox").val());
    var rowsArray = new Array();
    for (i=0; i < noOfRowsToBeAdded; i++) {
        rowsArray.push("<tr><td>content</td></tr>");
    }

    $("#tbl").append(rowsArray.join());
});

try something like that also:

$table.children('tbody').append(row);