Adding new rows to table on clicking button in jquery

Here is an example of how you can add a new row to a table on clicking a button using jQuery:

<table id="myTable">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- existing rows go here -->
  </tbody>
</table>

<button id="addRowButton">Add Row</button>

And the jQuery code:

$(document).ready(function() {
  $('#addRowButton').on('click', function() {
    var newRow = $('<tr><td></td><td></td><td></td></tr>');
    newRow.find('td:eq(0)').text('New Row'); // set the text of the first column
    newRow.find('td:eq(1)').text(''); // set the text of the second column
    newRow.find('td:eq(2)').text(''); // set the text of the third column
    $('#myTable tbody').append(newRow);
  });
});

This code uses the append() method to add a new row to the table body. The new row is created using the $(...) method, which creates a new jQuery object from the HTML string. The find() method is used to select the individual cells within the new row, and the text() method is used to set the text content of each cell.

You can customize the code to fit your specific needs, such as adding more columns, changing the text content of the cells, or adding additional functionality to the new row.

Alternatively, you can use a template engine like Handlebars or Mustache to generate the new row, which can make the code more concise and maintainable.

You can also use the clone() method to clone an existing row and append it to the table, like this:

$('#myTable tbody tr:eq(0)').clone().appendTo('#myTable tbody');

This will clone the first row of the table and append it to the table body.