DOM TableRow insertCell() Method

HTML | DOM Table insertRow( ) Method

Last Updated : 20 Nov, 2021

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

DOM TableRow insertCell() Method

S

Shubrodeep Banerjee

Improve

Article Tags :

Similar Reads

HTML DOM Range insertNode() Method

The insertNode() method inserts a node at the start of the Range. The updated Range consists of new inserted node before the Range of the last Range content. Syntax: range.insertNode( newNode ); Parameters: This method accepts single parameter as mentioned above and described below: newNode: The Nod

HTML DOM insertBefore() Method

The insertBefore() method in HTML DOM is used to insert a new node before the existing node as specified by the user. Syntax: node.insertBefore( newnode, existingnode ) Parameters: This method accepts two parameters as mentioned above and described below: newnode: It is the required parameter. This

DOM TableRow insertCell() Method

Introduction: The TableRow insertCell() Method in HTML DOM is used to add a single cell into a current Row at any particular position. It is a predefined method of the TableRow Object. Syntax: tablerowObject.insertCell(index) Parameter Values: index: It contains a numeric that starts from 0 that ind

HTML DOM console table() Method

The console.table() method in HTML is used for writing data in tabular form in the console view. The table data is sent as a parameter to the console.table() method which must be an object or an array containing the data to be filled in the table.Â Syntax:console.table( tabledata, tablecolumns );Para

HTML DOM Table Object

The HTML DOM Table object represents an HTML <table> element in the Document Object Model (DOM). It provides properties and methods to manipulate tables, such as adding or deleting rows and columns, accessing individual cells, or modifying the table's structure dynamically.Syntax:To access tab

HTML DOM write() Method

The write() method in HTML is used to write some content or JavaScript code in a Document. This method is mostly used for testing purposes. It is used to delete all the content from the HTML document and inserts the new content. It is also used to give additional text to an output that is opened by

HTML DOM Table deleteRow( ) Method

The Table deleteRow() method is used for removing a <tr> element from a table. In other words, Table deleteRow() method is used for deleting row(s) at the specified index in the table. SyntaxtableObject.deleteRow(index)Parameters Usedindex :It is used to specify the position of the row to be d

HTML DOM insertAdjacentText() Method

The insertAdjacentText() inserts a provided text at one of the following positions. afterbegin:afterend:beforebegin:beforeend: Syntax: node.insertAdjacentText(position, text) Parameters: This method requires 2 parameters. position: A position relative to the element. The legal values are:afterbegin:

HTML DOM Table rules Property

The HTML DOM Table rules property is used to set or return the value of the rules attribute of the <table> tag. The rules attribute is used to define which part of the borders should be visible. Note: This property is no longer supported in HTML5. Syntax It returns the rules property. tableObj

HTML | DOM TableRow rowIndex Property

The TableRow rowIndex property in HTML DOM is used to return the position and index of row among the collection of rows. Syntax: It returns the rowIndex property. tablerowObject.rowIndex Return Value: It returns the numeric value which represents the position of a row in the rows collection of a tab