Skip to content
Related Articles

Related Articles

Improve Article

DOM TableRow insertCell() Method

  • Last Updated : 31 Aug, 2021
Geek Week

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; wh

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: 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :