Add Rows to a Table Using JavaScript DOM

We will learn how to add a row to a table using JavaScript dom. To achieve this, we have multiple methods. Some of them are the following.

  • Using the insertRow() method

  • By creating the new Element

Using the insertRow() Method

The inserRow() method is used to insert a new row at the starting of the table. It creates a new <tr> element and inserts it into the table. This takes a number as a parameter that specifies the position of the table. If we do not pass any parameter then it inserts the row at the starting of the table. If you want to insert the row in the last of the table, then pass -1 as the parameter.

Syntax

table.insertRow(index)

Return value ? The element which was inserted.

As we know a proper table has not just table rows (<tr>), but also table documents (<td>) which are called table cells. To insert cells inside a row we use the insertCell() method. It creates a <td> element inside the table row. It takes a number as a parameter that specifies the index of the cell inside that row.

Syntax

Below is the syntax to insert cell ?

table.insertCell(index)

Return value ? The element which was inserted.

Steps to add a row to the table

  • Get the data table element.

  • Create a row using the insertRow() method and inset it into the table.

  • Create new cell(s) using the insertCell() method and insert them into the row you created.

  • Add data to the newly created cells.

Example

In this example, we have a table that contains the name of the students and their ages. We are adding a new student at the end of the table.


<!DOCTYPE html>
<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h2> Adding rows to a table using JavaScript DOM </h2>
   <p> Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
      </thead>
      <tbody>
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
         </tr>
      </tbody>
   </table>
</body>
<script>
   function addRow() {
      // Get the table element in which you want to add row
      let table = document.getElementById("myTable");
   
      // Create a row using the inserRow() method and
      // specify the index where you want to add the row
      let row = table.insertRow(-1); // We are adding at the end
   
      // Create table cells
      let c1 = row.insertCell(0);
      let c2 = row.insertCell(1);
      let c3 = row.insertCell(2);
   
      // Add data to c1 and c2
      c1.innerText = "Elon"
      c2.innerText = 45
      c3.innerText = "Houston"
   }
</script>
</html>

By Creating New Elements

In this method, we will create new rows and columns by using the document.createElement() method.

Approach

Here are the steps to add a row to a table by creating elements.

  • Get the table body element in which you want to add a row

  • Create row element

  • Create cells Insert data into cells

  • Append cells to the row

  • Append row to table body

Example


<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <h2> Adding rows to a table using JavaScript DOM </h2>
   <p>Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
         <th> Course </th>
      </thead>
      <tbody id="tableBody">
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
            <td> Java </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
            <td> Python </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
            <td> JavaScript </td>
         </tr>
      </tbody>
   </table>
</body>
<script>
   function addRow() {
      // Get the table body element in which you want to add row
      let table = document.getElementById("tableBody");
   
      // Create row element
      let row = document.createElement("tr")
      
      // Create cells
      let c1 = document.createElement("td")
      let c2 = document.createElement("td")
      let c3 = document.createElement("td")
      let c4 = document.createElement("td")
      
      // Insert data to cells
      c1.innerText = "Elon"
      c2.innerText = "42"
      c3.innerText = "Houston"
      c4.innerText = "C++"
      
      // Append cells to row
      row.appendChild(c1);
      row.appendChild(c2);
      row.appendChild(c3);
      row.appendChild(c4);
      
      // Append row to table body
      table.appendChild(row)
   }
</script>
</html>
Updated on: 2023-09-12T01:30:07+05:30

46K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements