forum

Home / DeveloperSection / Forums / Append a row in a table trough javascript

Ask Question

Append a row in a table trough javascript

Anonymous User30220-Jul-2021

How to add a row to table on button click via javascript?
javascriptjavascript 
Updated on 28-Nov-2023
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

28-Nov-2023

Certainly! You can append a new row to an HTML table using JavaScript. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Append Row to Table in JavaScript</title>
</head>
<body>

  <table id="myTable" border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>30</td>
        <td>Los Angeles</td>
      </tr>
    </tbody>
  </table>

  <button onclick="appendRow()">Add Row</button>

  <script>
    function appendRow() {
      // Get the reference to the table
      var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];

      // Create a new row
      var newRow = table.insertRow(table.rows.length);

      // Insert cells into the new row
      var cell1 = newRow.insertCell(0);
      var cell2 = newRow.insertCell(1);
      var cell3 = newRow.insertCell(2);

      // Add data to the cells
      cell1.innerHTML = "New Name";
      cell2.innerHTML = "New Age";
      cell3.innerHTML = "New City";
    }
  </script>

</body>
</html>

In this example:

  1. The table has an existing structure with headers and some rows.
  2. The appendRow function is called when the "Add Row" button is clicked.
  3. Inside the function, a reference to the table's <tbody> is obtained.
  4. A new row (<tr>) is created using insertRow() on the table's <tbody>.
  5. Cells (<td>) are added to the new row using insertCell().
  6. Data is added to the cells using the innerHTML property.

When you click the "Add Row" button, a new row will be appended to the table with the specified data. You can customize this example based on your specific requirements.

Liked By