Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to 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>
47K+ Views
