Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

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

Append a row in a table trough javascript

Anonymous User 555 20 Jul 2021
How to add a row to table on button click via javascript?
javascript javascript
Updated 28 Nov 2023
Anonymous User
Anonymous User

Software Developer Trainee

I am a content writter !

Message

1 Answers

Aryan Kumar
Aryan Kumar 28 Nov 2023
Report Abuse

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