HTML / CSS / JavaScript Tutorial

JavaScript table object property: tBodies

[this page | pdf | back links]

The tBodies property of the JavaScript DOM object corresponding to the HTML <table> element returns a collection of <tbody> elements of the table. <tbody> DOM elements have row-orientated JavaScript properties and methods like those of <table> elements.



<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
table,td,tr,th,caption {border: thin solid black; border-collapse: collapse;}
Example table:
<table id="element">
  <caption>A table</caption>
    <tr><td>Entry 1</td><td>Entry 2</td></tr>

Details of above table extracted using JavaScript:
  <tr><td>Table caption</td><td id="x1"></td></tr>
  <tr><td>Number of rows (overall)</td><td id="x2"></td></tr>
  <tr><td>Number of tbody elements</td><td id="x3"></td></tr>
  <tr><td>Number of rows in thead element</td><td id="x4"></td></tr>
  <tr><td>Number of rows in first tbody</td><td id="x5"></td></tr>
  <tr><td>Number of rows in second tbody</td><td id="x6"></td></tr>
  <tr><td>Number of rows in tfoot</td><td id="x7"></td></tr>
  <tr><td>Text in first cell of second overall row</td><td id="x8"></td></tr>
  <tr><td>Text in second cell of first row of second tbody</td><td id="x9"></td></tr>

var x = document.getElementById("element");
document.getElementById("x1").innerHTML = x.caption.innerHTML;
document.getElementById("x2").innerHTML = x.rows.length;
document.getElementById("x3").innerHTML = x.tBodies.length;
document.getElementById("x4").innerHTML = x.tHead.rows.length;
document.getElementById("x5").innerHTML = x.tBodies[0].rows.length;
document.getElementById("x6").innerHTML = x.tBodies[1].rows.length;
document.getElementById("x7").innerHTML = x.tFoot.rows.length;
document.getElementById("x8").innerHTML = x.rows[1].cells[0].innerHTML;
document.getElementById("x9").innerHTML = x.tBodies[1].rows[0].cells[1].innerHTML;


Contents | Prev | Next | JavaScript DOM (and BOM)

Desktop view | Switch to Mobile