tableObject.tBodiesは、表（table要素）内のデータ行ブロック（tbody要素）のコレクション。
データ行ブロック（tbody要素）は、１行でブロック化することも、複数行でブロック化することもできる。表に複数のデータ行ブロック（tbody要素）を指定することもできる。
構文
$tableElementReference.tBodies;
例
$tableElementReference.tBodies[0]; // 表の１つ目のデータ行ブロックへの参照
$tableElementReference.tBodies[1]; // 表の２つ目のデータ行ブロックへの参照
$tableElementReference.tBodies.length; // 表のデータ行ブロックの数
$tableElementReference.tBodies[0].innerHTML; // 表の１つ目のデータ行ブロックへの参照内容
$tableElementReference.tBodies[0].cells[0]; // 表の１行目の１列目のセルへの参照
$tableElementReference.tBodies[1]; // 表の２つ目のデータ行ブロックへの参照
$tableElementReference.tBodies.length; // 表のデータ行ブロックの数
$tableElementReference.tBodies[0].innerHTML; // 表の１つ目のデータ行ブロックへの参照内容
$tableElementReference.tBodies[0].cells[0]; // 表の１行目の１列目のセルへの参照
サンプル
| １行目１列目 | １行目２列目 | １行目３列目 |
| ２行目１列目 | ２行目２列目 | ２行目３列目 |
| ３行目１列目 | ３行目２列目 | ３行目３列目 |
サンプルの動作について
- 背景色が薄い青色のセルにマウスのポインタ（カーソル）を合わせると、背景色が薄い青色の全てのセルの背景色を黄色にする。マウスのポインタ（カーソル）を外すと、元の薄い青色の背景色に戻る。
- 背景色が薄い緑色のセルにマウスのポインタ（カーソル）を合わせると、背景色が薄い緑色の全てのセルの背景色を黄色にする。マウスのポインタ（カーソル）を外すと、元の薄い緑色の背景色に戻る。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function(){
var $sampleTBodies = document.getElementById( "sample" ).tBodies;
for ( var $tbodyIndex = 0; $tbodyIndex < $sampleTBodies.length; $tbodyIndex++ ) {
$sampleTBodies[$tbodyIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
};
$sampleTBodies[$tbodyIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
</script>
window.onload = function(){
var $sampleTBodies = document.getElementById( "sample" ).tBodies;
for ( var $tbodyIndex = 0; $tbodyIndex < $sampleTBodies.length; $tbodyIndex++ ) {
$sampleTBodies[$tbodyIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
};
$sampleTBodies[$tbodyIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
</script>
HTML
<table id="sample">
<tbody id="sampleTbodyA">
<tr>
<td>１行目１列目</td>
<td>１行目２列目</td>
<td>１行目３列目</td>
</tr>
</tbody>
<tbody id="sampleTbodyB">
<tr>
<td>２行目１列目</td>
<td>２行目２列目</td>
<td>２行目３列目</td>
</tr>
<tr>
<td>３行目１列目</td>
<td>３行目２列目</td>
<td>３行目３列目</td>
</tr>
</tbody>
</table>
<tbody id="sampleTbodyA">
<tr>
<td>１行目１列目</td>
<td>１行目２列目</td>
<td>１行目３列目</td>
</tr>
</tbody>
<tbody id="sampleTbodyB">
<tr>
<td>２行目１列目</td>
<td>２行目２列目</td>
<td>２行目３列目</td>
</tr>
<tr>
<td>３行目１列目</td>
<td>３行目２列目</td>
<td>３行目３列目</td>
</tr>
</tbody>
</table>
CSS
<style>
#sample {
cursor: pointer;
}
#sampleTbodyA {
background-color: lightblue;
}
#sampleTbodyB {
background-color: lightgreen;
}
#sample tr,
#sample td {
background-color: inherit;
}
</style>
#sample {
cursor: pointer;
}
#sampleTbodyA {
background-color: lightblue;
}
#sampleTbodyB {
background-color: lightgreen;
}
#sample tr,
#sample td {
background-color: inherit;
}
</style>