Open In App

HTML | DOM Table insertRow( ) Method

Improve
Improve
Like Article
Like
Save
Share
Report

The Table insertRow() method is used for creating an empty <tr> an element which can be added to a table. 
It is generally used for inserting a new row(s) at the specified index in the table. 
A <tr> element contain atleast one <th> or <td> elements.
Syntax 
 

tableObject.insertRow(index)

Parameters Used 
 

  • index: It is used to specify the position of the row to be inserted. The value 0 results in the insertion of the new row at the first position whereas -1 can be used to insert the new row at the last position.

Return Value : It returns  the inserted <tr> element

Below program illustrates the Table insertRow() method : 
Example-1: Inserting new row at the first position of a table. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Table insertRow() method in HTML</title>
    <style>
        table,
        td {
            border: 1px solid green;
        }
         
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h2>Table insertRow() method</h2>
 
     
<p>To add a new row at the first
      position of the table, double-click
      the "Add Row" button.</p>
 
 
    <table id="Courses"
           align="center">
        <tr>
            <td>Java</td>
            <td>Fork Java</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>Fork Python</td>
        </tr>
    </table>
    <br>
 
    <button ondblclick="row()">
      Add Row
  </button>
 
    <script>
        function row() {
           
               
            var MyTable =
                document.getElementById("Courses");
           
            // insert new row.
            var NewRow = MyTable.insertRow(0);
            var Newcell1 = NewRow.insertCell(0);
            var Newcell2 = NewRow.insertCell(1);
            Newcell1.innerHTML = "Placement";
            Newcell2.innerHTML = "Sudo Placement";
        }
    </script>
 
</body>
 
</html>


Output: 
 

After clicking the button 
 

Supported Browsers: 
 

  • Apple Safari
  • Internet Explorer
  • Firefox
  • Google Chrome
  • Opera

 



Last Updated : 20 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads