thObject.cellIndexは、表（table要素）における見出しセル（th要素）のインデックス番号を取得するプロパティ。
構文
取得
$thElementReference.cellIndex;
戻り値
- 見出しセル（th要素）のインデックス番号。
- 「0」から始まる点に注意。
例
$tableElementReference.rows[0].getElementsByTagName("th")[0].cellIndex; // 表の１行目の１つ目の見出しセル（th要素）のインデックス番号「0」
サンプル
カーソルを合わせた見出しセル（th要素）のインデックス：
| ヘッダ１ | ヘッダ２ | ヘッダ３ |
|---|---|---|
| １行目１列目 | １行目２列目 | １行目３列目 |
| ２行目１列目 | ２行目２列目 | ２行目３列目 |
| ３行目１列目 | ３行目２列目 | ３行目３列目 |
サンプルの動作について
表の背景色が薄い青色の見出しセルにカーソルを合わせると、その見出しセルの背景色を黄色にする。「カーソルを合わせた見出しセル（th要素）のインデックス：」の右横に、カーソルを合わせた見出しセル（th要素）のインデックス番号を表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function(){
var $sampleRows = document.getElementById( "sample" ).rows;
for ( var $rowIndex = 0; $rowIndex < $sampleRows.length; $rowIndex++ ) {
var $sampleHeaderCells = $sampleRows[$rowIndex].getElementsByTagName("th");
for ( var $cellIndex = 0; $cellIndex < $sampleHeaderCells.length; $cellIndex++ ) {
$sampleHeaderCells[$cellIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
document.getElementById( "sampleOutput" ).innerHTML = this.cellIndex;
};
$sampleHeaderCells[$cellIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
}
</script>
window.onload = function(){
var $sampleRows = document.getElementById( "sample" ).rows;
for ( var $rowIndex = 0; $rowIndex < $sampleRows.length; $rowIndex++ ) {
var $sampleHeaderCells = $sampleRows[$rowIndex].getElementsByTagName("th");
for ( var $cellIndex = 0; $cellIndex < $sampleHeaderCells.length; $cellIndex++ ) {
$sampleHeaderCells[$cellIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
document.getElementById( "sampleOutput" ).innerHTML = this.cellIndex;
};
$sampleHeaderCells[$cellIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
}
</script>
HTML
<p>
カーソルを合わせた見出しセル（th要素）のインデックス：<span id="sampleOutput"></span>
</p>
<table id="sample">
<tr>
<th>ヘッダ１</th>
<th>ヘッダ２</th>
<th>ヘッダ３</th>
</tr>
<tr>
<td>１行目１列目</td>
<td>１行目２列目</td>
<td>１行目３列目</td>
</tr>
<tr>
<td>２行目１列目</td>
<td>２行目２列目</td>
<td>２行目３列目</td>
</tr>
<tr>
<td>３行目１列目</td>
<td>３行目２列目</td>
<td>３行目３列目</td>
</tr>
</table>
カーソルを合わせた見出しセル（th要素）のインデックス：<span id="sampleOutput"></span>
</p>
<table id="sample">
<tr>
<th>ヘッダ１</th>
<th>ヘッダ２</th>
<th>ヘッダ３</th>
</tr>
<tr>
<td>１行目１列目</td>
<td>１行目２列目</td>
<td>１行目３列目</td>
</tr>
<tr>
<td>２行目１列目</td>
<td>２行目２列目</td>
<td>２行目３列目</td>
</tr>
<tr>
<td>３行目１列目</td>
<td>３行目２列目</td>
<td>３行目３列目</td>
</tr>
</table>
CSS
<style>
#sample {
background-color: white;
cursor: pointer;
}
#sample tr,
#sample td {
background-color: inherit;
}
#sample th {
font-size: inherit !important;
color: inherit !important;
background-color: lightblue;
}
</style>
#sample {
background-color: white;
cursor: pointer;
}
#sample tr,
#sample td {
background-color: inherit;
}
#sample th {
font-size: inherit !important;
color: inherit !important;
background-color: lightblue;
}
</style>