Add new row in table on button click using javascript

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

// Get the table and button elements
var table = document.getElementById("myTable");
var addButton = document.getElementById("addButton");

// Add an event listener to the button
addButton.addEventListener("click", function() {
  // Create a new row element
  var newRow = table.insertRow();

  // Create new cells for the row
  var cell1 = newRow.insertCell();
  var cell2 = newRow.insertCell();
  var cell3 = newRow.insertCell();

  // Set the text content of the cells
  cell1.textContent = "New Row";
  cell2.textContent = "New Cell 2";
  cell3.textContent = "New Cell 3";
});

This code assumes that you have a table with an ID of "myTable" and a button with an ID of "addButton". When the button is clicked, it creates a new row in the table and adds three new cells to it. You can customize the code to fit your specific needs.

Here is an example of the HTML code that you would need to add to your page:

<table id="myTable">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
    <td>Row 1 Cell 3</td>
  </tr>
</table>

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

You can also use the innerHTML property to add a new row to the table, like this:

addButton.addEventListener("click", function() {
  table.innerHTML += "<tr><td>New Row</td><td>New Cell 2</td><td>New Cell 3</td></tr>";
});

This will add a new row to the end of the table, but it will not preserve the formatting of the existing rows.

You can also use a template literal to add a new row to the table, like this:

addButton.addEventListener("click", function() {
  table.innerHTML += `
    <tr>
      <td>New Row</td>
      <td>New Cell 2</td>
      <td>New Cell 3</td>
    </tr>
  `;
});

This will add a new row to the end of the table, and it will preserve the formatting of the existing rows.

You can also use a library like jQuery to add a new row to the table, like this:

addButton.addEventListener("click", function() {
  $("#myTable").append("<tr><td>New Row</td><td>New Cell 2</td><td>New Cell 3</td></tr>");
});

This will add a new row to the end of the table, and it will preserve the formatting of the existing rows.