Open In App

HTML | DOM Table insertRow( ) Method

Last Updated : 20 Nov, 2021
Comments
Improve
Suggest changes
Like Article
Like
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


 


S
Shubrodeep Banerjee
Improve
Article Tags :

Explore

Lightbox