HTML | DOM TableRow Object

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before click on the button:

After click on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before click on the button:

After click on the button:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.