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 >
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
Share your thoughts in the comments
Please Login to comment...