Code snippet: Create a new row in the HTML table using jQuery

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.