Open In App

DOM TableRow insertCell() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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 indicates the position of the cell to be inserted in a current row. The value of -1 can also be used.

Note: 

  • The parameter is to be defined mandatory in the Firefox and Opera browser. on the other hand it is optional in safari, chrome and IE Browsers.
  • If this parameter is does not contain any value, so  insertCell() adds the new cell at the last position in IE and at the first position in Chrome and Safari.

Example 1: In this example, we will insert the cell at the first position using DOM TableRow insertCell() Method.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM TableRow insertCell() Method
    </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>
        HTML DOM TableRow insertCell() Method
    </h2>
 
    <table align="center">
        <tr id="gfg">
            <td>GEEKS</td>
            <td>FOR</td>
        </tr>
    </table>
    <br>
 
    <button onclick="row()">
        Add cell at last Position
    </button>
 
    <script>
        function row() {
            var MyCell =
                document.getElementById("gfg");
            var AddCell = MyCell.insertCell(-1);
            AddCell.innerHTML = "GEEKS";
        }
    </script>
</body>
 
</html>


Output:

Example 2: In this example, we will insert the cell at the last position using DOM TableRow insertCell() Method.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM TableRow insertCell() Method
    </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>
        HTML DOM TableRow insertCell() Method
    </h2>
 
    <table align="center">
        <tr id="gfg">
            <td>GEEKS</td>
            <td>FOR</td>
        </tr>
    </table>
    <br>
 
    <button onclick="row()">
        Add cell at last Position
    </button>
 
    <script>
        function row() {
            var MyCell =
                document.getElementById("gfg");
            var AddCell = MyCell.insertCell(-1);
            AddCell.innerHTML = "GEEKS";
        }
    </script>
</body>
 
</html>


Output: 



Last Updated : 09 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads