trObject.sectionRowIndexは、表（table要素）のブロック（セクション）ごとの行（tr要素）のインデックス番号を取得するプロパティ。
このプロパティが返すインデックス番号は、tableObject.rowsコレクションにおけるインデックス番号のこと。
表（table要素）におおけるブロック（セクション）とは、tbody要素や、thead要素、tfoot要素で括った部分のこと。
取得
$trElementReference.sectionRowIndex;
戻り値
- ブロック（セクション）ごとの行（tr要素）のインデックス番号。
- tableObject.rowsコレクションにおけるインデックス番号。
- 「0」から始まる点に注意。
例
$tableElementReference.rows[0].sectionRowIndex; // 表の１行目の行のブロック別インデックス番号「0」
$tableElementReference.rows[2].sectionRowIndex; // 表の３行目の行のブロック別インデックス番号「2」
$tableElementReference.rows[2].sectionRowIndex; // 表の３行目の行のブロック別インデックス番号「2」
サンプル
カーソルを合わせた行（tr要素）のブロック別インデックス：
| ヘッダ１－１ | ヘッダ１－２ | ヘッダ１－３ |
|---|---|---|
| ヘッダ２－１ | ヘッダ２－２ | ヘッダ２－３ |
| １行目１列目 | １行目２列目 | １行目３列目 |
| ２行目１列目 | ２行目２列目 | ２行目３列目 |
| ３行目１列目 | ３行目２列目 | ３行目３列目 |
| フッタ１－１ | フッタ１－２ | フッタ１－３ |
| フッタ２－１ | フッタ２－２ | フッタ２－３ |
サンプルの動作について
表のセルにカーソルを合わせると、そのセルの背景色を黄色にする。「カーソルを合わせた行（tr要素）のインデックス：」の右横に、カーソルを合わせた行（tr要素）のブロックごとのインデックス番号を表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function(){
var $sampleRows = document.getElementById( "sample" ).rows;
for ( var $sectionRowIndex = 0; $sectionRowIndex < $sampleRows.length; $sectionRowIndex++ ) {
$sampleRows[$sectionRowIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
document.getElementById( "sampleOutput" ).innerHTML = this.sectionRowIndex;
};
$sampleRows[$sectionRowIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
</script>
window.onload = function(){
var $sampleRows = document.getElementById( "sample" ).rows;
for ( var $sectionRowIndex = 0; $sectionRowIndex < $sampleRows.length; $sectionRowIndex++ ) {
$sampleRows[$sectionRowIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
document.getElementById( "sampleOutput" ).innerHTML = this.sectionRowIndex;
};
$sampleRows[$sectionRowIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
</script>
HTML
<p>
カーソルを合わせた行（tr要素）のブロック別インデックス：<span id="sampleOutput"></span>
</p>
<table id="sample">
<thead>
<tr>
<th>ヘッダ１－１</th>
<th>ヘッダ１－２</th>
<th>ヘッダ１－３</th>
</tr>
<tr>
<th>ヘッダ２－１</th>
<th>ヘッダ２－２</th>
<th>ヘッダ２－３</th>
</tr>
</thead>
<tbody>
<tr>
<td>１行目１列目</td>
<td>１行目２列目</td>
<td>１行目３列目</td>
</tr>
<tr>
<td>２行目１列目</td>
<td>２行目２列目</td>
<td>２行目３列目</td>
</tr>
<tr>
<td>３行目１列目</td>
<td>３行目２列目</td>
<td>３行目３列目</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>フッタ１－１</th>
<th>フッタ１－２</th>
<th>フッタ１－３</th>
</tr>
<tr>
<th>フッタ２－１</th>
<th>フッタ２－２</th>
<th>フッタ２－３</th>
</tr>
</tfoot>
</table>
カーソルを合わせた行（tr要素）のブロック別インデックス：<span id="sampleOutput"></span>
</p>
<table id="sample">
<thead>
<tr>
<th>ヘッダ１－１</th>
<th>ヘッダ１－２</th>
<th>ヘッダ１－３</th>
</tr>
<tr>
<th>ヘッダ２－１</th>
<th>ヘッダ２－２</th>
<th>ヘッダ２－３</th>
</tr>
</thead>
<tbody>
<tr>
<td>１行目１列目</td>
<td>１行目２列目</td>
<td>１行目３列目</td>
</tr>
<tr>
<td>２行目１列目</td>
<td>２行目２列目</td>
<td>２行目３列目</td>
</tr>
<tr>
<td>３行目１列目</td>
<td>３行目２列目</td>
<td>３行目３列目</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>フッタ１－１</th>
<th>フッタ１－２</th>
<th>フッタ１－３</th>
</tr>
<tr>
<th>フッタ２－１</th>
<th>フッタ２－２</th>
<th>フッタ２－３</th>
</tr>
</tfoot>
</table>
CSS
<style>
#sample {
background-color: white;
cursor: pointer;
}
#sample tr,
#sample th,
#sample td {
background-color: inherit;
font-size: inherit !important;
color: inherit !important;
}
#sample thead,
#sample tfoot {
background-color: lightblue;
}
</style>
#sample {
background-color: white;
cursor: pointer;
}
#sample tr,
#sample th,
#sample td {
background-color: inherit;
font-size: inherit !important;
color: inherit !important;
}
#sample thead,
#sample tfoot {
background-color: lightblue;
}
</style>