forum

home / developersection / forums / append a row in a table trough javascript

Ask Question

Append a row in a table trough javascript

Anonymous User 503 20-Jul-2021

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

Software Developer Trainee

I am a content writter !

Message
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.

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy