You can create a new row in the existing html table at run time using the jQuery. The following code sample shows how to create a new row in to the html table.
let’s suppose we have the following html table:
<table id="tbl"> <tbody> <tr><td><input id="input1" type="text"/></td></tr> <tr><td><input id="input2" type="text"/></td></tr> </tbody> </table>
than you can write the code in JavaScript using jQuery like this:
$('#tbl tr:last').after('<tr><td><input id="input3" type="text"/></td></tr>');
Now take a another scenario, let’s assume that we have a button and we have to create a new row on the click of that button. Obiously we need to set the unique id for input control inside the td element.
var i = 1; $("btnNew").click(function() { $("#tbl tr:first").clone().find("input").each(function() { $(this).val('').attr('id', function(_, id) { return id + i }); }).end().appendTo("#tbl"); i++; });
I hope it will help you.