HTML | DOM TableRow Object

Last Updated : 29 Jun, 2021

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.

html

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

html

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