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