Javascript Reference - HTML DOM Table tBodies Collection

The tBodies collection returns a collection of all <tbody> elements in a table.

Browser Support


`tBodies`	Yes	Yes	Yes	Yes	Yes

Syntax

var v = tableObject.tBodies

Properties

Property	Description
length	Returns the number of <tbody> elements in the collection

Methods

Method	Description
[name_or_index]	Get the element by index which starts at 0 or name
item(name_or_index)	Get the element from the collection by index/name/id
namedItem(name_or_id)	Get the element from the collection by name or id attribute

Example

The following code shows how to show the number of <tbody> elements in a table.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  w w w .  ja  va2  s  .c  o m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tbody>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</tbody>
<tbody>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</tbody>
</table>
<br> 

<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myTable").tBodies.length;
    document.getElementById("demo").innerHTML = "Found " + x + " tbody elements in the table.";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to output the innerHTML of the first <tbody> element in the table by using [name_or_index] syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  ww w .  j  a  v a2  s  .  com-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tbody>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</tbody>
<tbody>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</tbody>
</table>
<br> 

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").tBodies[0].innerHTML);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to output the innerHTML of the first <tbody> element in the table by item(name_or_index) syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!-- www.j ava  2 s.  c  o  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tbody>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</tbody>
<tbody>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</tbody>
</table>
<br> 

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").tBodies.item(0).innerHTML);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to output the innerHTML of the <tbody> element with id="myTBody" in the table by using namedItem(name_or_id) syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  w  ww.j a v  a2  s .  c  om-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tbody id="myTBody">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</tbody>
<tbody>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</tbody>
</table>
<br> 

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").tBodies.namedItem("myTBody").innerHTML);
}
</script>

</body>
</html>

The code above is rendered as follows: