Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Table tBodies Collection
The HTML DOM table tBodies Collection returns a collection of all <tbody> elements within a specific table element. This collection is live, meaning it automatically updates when <tbody> elements are added or removed from the table.
Syntax
Following is the syntax to access the tBodies collection −
tableObject.tBodies
Where tableObject is a reference to an HTML table element obtained through methods like document.getElementById() or document.querySelector().
Properties
The tBodies collection has the following property −
| Property | Description |
|---|---|
| length | Returns the number of <tbody> elements in the collection |
Methods
The tBodies collection provides the following methods to access individual <tbody> elements −
| Method | Description |
|---|---|
| [index] | Returns the <tbody> element at the specified index (0-based) |
| item(index) | Returns the <tbody> element at the specified index (0-based) |
| namedItem(id) | Returns the <tbody> element with the specified id attribute |
Example − Getting Number of Table Bodies
Following example demonstrates how to use the tBodies collection to count the number of <tbody> elements in a table −
<!DOCTYPE html>
<html>
<head>
<title>DOM Table tBodies Collection</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Student Records</h2>
<table border="1" style="margin: 20px auto; border-collapse: collapse;">
<thead>
<tr>
<th style="padding: 8px;">Name</th>
<th style="padding: 8px;">Roll No.</th>
</tr>
</thead>
<tbody id="group1">
<tr>
<td style="padding: 8px;">John</td>
<td style="padding: 8px;">071717</td>
</tr>
<tr>
<td style="padding: 8px;">Jane</td>
<td style="padding: 8px;">031717</td>
</tr>
</tbody>
<tbody id="group2">
<tr>
<td style="padding: 8px;">Elon</td>
<td style="padding: 8px;">021717</td>
</tr>
<tr>
<td style="padding: 8px;">Mario</td>
<td style="padding: 8px;">011717</td>
</tr>
</tbody>
</table>
<button onclick="countBodies()" style="padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer;">Count Table Bodies</button>
<p id="result" style="font-weight: bold; margin-top: 20px;"></p>
<script>
function countBodies() {
var table = document.querySelector('table');
var count = table.tBodies.length;
document.getElementById('result').innerHTML = 'Number of tbody elements: ' + count;
}
</script>
</body>
</html>
The output displays a table with two <tbody> sections and a button to count them −
Student Records Name | Roll No. ---------|---------- John | 071717 Jane | 031717 Elon | 021717 Mario | 011717 [Count Table Bodies] (After clicking: Number of tbody elements: 2)
Example − Accessing Individual Table Bodies
Following example shows how to access individual <tbody> elements using different methods −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Individual tBodies</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Department Records</h2>
<table id="myTable" border="1" style="margin: 20px auto; border-collapse: collapse;">
<thead>
<tr>
<th style="padding: 8px;">Employee</th>
<th style="padding: 8px;">Department</th>
</tr>
</thead>
<tbody id="hr-dept">
<tr>
<td style="padding: 8px;">Alice</td>
<td style="padding: 8px;">HR</td>
</tr>
</tbody>
<tbody id="it-dept">
<tr>
<td style="padding: 8px;">Bob</td>
<td style="padding: 8px;">IT</td>
</tr>
</tbody>
</table>
<button onclick="accessBodies()" style="padding: 10px 20px; background: #28a745; color: white; border: none; cursor: pointer;">Access Table Bodies</button>
<div id="output" style="margin-top: 20px; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto;"></div>
<script>
function accessBodies() {
var table = document.getElementById('myTable');
var output = document.getElementById('output');
var result = '';
// Access by index
result += '<p><strong>First tbody (index 0):</strong> ' + table.tBodies[0].id + '</p>';
// Access using item() method
result += '<p><strong>Second tbody (item(1)):</strong> ' + table.tBodies.item(1).id + '</p>';
// Access using namedItem() method
result += '<p><strong>tbody by ID (namedItem):</strong> ' + table.tBodies.namedItem('hr-dept').id + '</p>';
// Total count
result += '<p><strong>Total tbody elements:</strong> ' + table.tBodies.length + '</p>';
output.innerHTML = result;
}
</script>
</body>
</html>
This example demonstrates three different ways to access <tbody> elements from the collection −
Department Records Employee | Department ---------|---------- Alice | HR Bob | IT [Access Table Bodies] (After clicking displays:) First tbody (index 0): hr-dept Second tbody (item(1)): it-dept tbody by ID (namedItem): hr-dept Total tbody elements: 2
Example − Styling Table Bodies
Following example shows how to apply different styles to multiple <tbody> elements using the collection −
<!DOCTYPE html>
<html>
<head>
<title>Styling Multiple tBodies</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Product Inventory</h2>
<table id="productTable" border="1" style="margin: 20px auto; border-collapse: collapse;">
<thead>
<tr style="background-color: #f0f0f0;">
<th style="padding: 8px;">Product</th>
<th style="padding: 8px;">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px;">Laptop</td>
<td style="padding: 8px;">$999</td>
</tr>
<tr>
<td style="padding: 8px;">Mouse</td>
<td style="padding: 8px;">$25</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="padding: 8px;">Monitor</td>
<td style="padding: 8px;">$299</td>
</tr>
<tr>
<td style="padding: 8px;">Keyboard</td>
<td style="padding: 8px;">$75</td>
</tr>
</tbody>
</table>
<button onclick="styleBodies()" style="padding: 10px 20px; background: #dc3545; color: white; border: none; cursor: pointer;">Apply Styles</button>
<script>
function styleBodies() {
var table = document.getElementById('productTable');
var bodies = table.tBodies;
// Style first tbody with light blue background
if (bodies.length > 0) {
bodies[0].style.backgroundColor = '#e6f3ff';
}
// Style second tbody with light green background
if (bodies.length > 1) {
bodies[1].style.backgroundColor = '#e6ffe6';
}
}
</script>
</body>
</html>
After clicking the "Apply Styles" button, the first <tbody> gets a light blue background and the second gets a light green background.
Product Inventory Product | Price ---------|-------- Laptop | $999 (light blue background after styling) Mouse | $25 (light blue background after styling) Monitor | $299 (light green background after styling) Keyboard | $75 (light green background after styling) [Apply Styles]
Conclusion
The tBodies collection provides a convenient way to access and manipulate all <tbody> elements within an HTML table. It supports accessing elements by index, using the item() method, or by ID using namedItem(). This collection is particularly useful for applying different styles or behaviors to separate sections of table data.
210 Views
