Skip to content
Related Articles

Related Articles

HTML | DOM TableRow Object
  • Last Updated : 22 Oct, 2019
GeeksforGeeks - Summer Carnival Banner

The TableRow Object in HTML DOM is used to represent the HTML <tr> element. The <tr> element can be accessed by using getElementById() method.

Syntax:

document.getElementById("id");

The tr element can be created by using the document.createElement() method.
Syntax:

document.createElement("tr");

Property Value:

  • align: It is used to set or return the horizontal alignment of the content within a table row. It is not supported in HTML 5.
  • vAlign: It is used to set or return the vertical alignment of the content within a table row. It is not supported in HTML 5.
  • bgColor: It is used to set or return the background color of a table row. It is not supported in HTML 5.
  • ch: It is used to set or return an alignment character for cells in a table row. It is not supported in HTML 5.
  • chOff: It is used to set or return the horizontal offset of the ch property. It is not supported in HTML 5.
  • height: It is used to set or return the height of a table row. It is not supported in HTML 5.
  • rowIndex: It is used to return the position of row in the rows collection of a table.
  • sectionRowIndex: It is used to return the position of a row in the rows collection of a tbody, thead, or tfoot.

TableRow Object Methods:



  • deleteCell(): This method is used to delete a cell from the current table row.
  • insertCell(): This method is used to insert a cell into the current table row.

Example 1: This example describes the getElementById() method to access the <tr> element.




<!DOCTYPE html>
<html>
      
<head>
    <style>
        table, th, td {
            border: 1px solid green;
  
        }
    </style>
</head>
  
<body
  
    <h1
        GeeksForGeeks 
    </h1
          
    <h2>HTML DOM tableRow Object</h2
  
    <table>
        <tr id = "GFG">
            <td>Geeks</td>
            <td>Geeks</td>
            <td>For</td>
            <td>Geeks</td>
        </tr>
    </table>
  
    <p>
        Click on the button to delete
        cell of table
    </p>
  
    <button onclick = "myGeeks()">
        Click Here!
    </button>
  
    <script>
        function myGeeks() {
            var row = document.getElementById("GFG");
            row.deleteCell(0);
        }
    </script>
</body>
  
</html>                    

Output:
Before click on the button:

After click on the button:

Example 2: This example describes the document.createElement() method to create <tr> element.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        HTML DOM TableRow Object
    </title>
      
    <style>
        table, td {
            border: 1px solid green;
        }
    </style>
</head>
  
<body
  
    <h1>GeeksForGeeks</h1
          
    <h2>DOM tableRow Object</h2
  
    <table id = "GeeksTable"></table>
  
    <p>
        Click on the button to create 
        table element.
    </p>
  
    <button onclick = "myGeeks()">
        Click Here!
    </button>
  
    <!-- script to create table -->
    <script>
        function myGeeks() {
              
            /* Create tr element */
            var x = document.createElement("TR");
              
            /* Set the id attribute */
            x.setAttribute("id", "GeeksTr");
              
            /* Append element to table */
            document.getElementById("GeeksTable").appendChild(x);
              
            /* Create td element */
            var y = document.createElement("TD");
              
            var t = document.createTextNode("Hello");
              
            y.appendChild(t);
              
            document.getElementById("GeeksTr").appendChild(y);
              
            /* Create td element */
            var z = document.createElement("TD");
              
            /* Assign node value */
            var p = document.createTextNode("Geeks!");
              
            /* Append node value to child element */
            z.appendChild(p);
              
            document.getElementById("GeeksTr").appendChild(z);
        }
    </script>
</body>
  
</html>                    

Output:
Before click on the button:

After click on the button:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :