The HTML DOM TableRow cells Collections is used to return all the total number of cells of a particular row in the table. It includes all the <td> and <th> element. The sequence of the <tr> elements is sorted in the same way as their position in the source code.
Syntax:
tableObject.cells
Properties:
- length: It is used to return the number of <td> and <th> element in the collection.
Methods:
- [index]: It is used for returning the <td> and <th> element from the collection with a specified index. If the index number is out of range then it will return null.
- item(index): It is also used for returning the <td> and <th> element from the collection with a specified index. If the index number is out of range then it will return null.
- namedItem(id): It is also used for returning the <td> and <th> element from the collection with a specified id. If the id doesn’t exist then the return value is null.
Return value:- It is used to return all the <td> and <th> element of a particular row in the table.
The below example illustrates the implementation of the TableRow cells collection.
Example:
HTML
<!DOCTYPE html><html>
<head>
<title>TableRow cells Collection in HTML</title>
<style>
table,
td {
border: 1px solid green;
}
h1 {
color: green;
}
h2 {
font-family: sans-serif;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML DOM TableRow cells Collection</h2>
<p>
To return the number of cells in the table,
double-click on the "Return cells" button.
</p>
<table id="Courses" align="center">
<caption>
GeeksforGeeks Courses
</caption>
<tr>
<td>Front-end Development</td>
<td>HTML</td>
<td>CSS</td>
<td>JS</td>
</tr>
<tr>
<td>Back-end Development</td>
<td>PHP</td>
<td>Java</td>
<td>Python</td>
</tr>
<tr>
<td>Placements Courses</td>
<td>DSA Algorithms</td>
<td>Interview questions on Advanced DSA</td>
<td>Aptitude & Logical Reasoning</td>
</tr>
</table>
<br />
<button onclick="rowCount()">Return Cells</button>
<p id="test"></p>
<script>
function rowCount() {
// Number of rows.
var row = document.getElementById("Courses")
.rows[2].cells.length;
document.getElementById("test").innerHTML =
" Number of cells in the 3rd row: " + row;
}
</script>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome 1.0 & above
- Internet Explorer 5.5 & above
- Microsoft Edges 12.0 & above
- Firefox 1.0 & above
- Safari 3.0 & above
- Opera 12.1 & above