
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
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>
- Related Articles
- How to sort rows in a table using JavaScript?
- With JavaScript DOM delete rows in a table?
- Add elements to a hash table using Javascript
- How to add some rows to a table through DefaultTableModel in Java
- How to add table rows Dynamically in Android Layout?
- How to add a class to DOM element in JavaScript?
- How to create a table caption with JavaScript DOM?
- How to add a new element to HTML DOM in JavaScript?
- HTML DOM Table rows Collection
- How add unique key to existing table (with non-unique rows)?
- How to use JavaScript DOM to change the padding of a table?
- How to add a tooltip to a div using JavaScript?
- How to layout table cells, rows, and columns with JavaScript?
- How to add a new row in a table using jQuery?
- How to add float numbers using JavaScript?
