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.
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
Please Login to comment...