Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:  

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

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>                   

Output: 
Before click on the button: 
 

After click on the button: 
 

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Mozilla Firefox
  • Opera
  • Safari

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!