Skip to content
Related Articles

Related Articles

HTML | DOM Table insertRow( ) Method
  • Last Updated : 19 Feb, 2019

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.

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




<!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



My Personal Notes arrow_drop_up
Recommended Articles
Page :