thObject.cellIndexプロパティ

thObject.cellIndexは、表(table要素)における見出しセル(th要素)のインデックス番号を取得するプロパティ。

構文

取得

$thElementReference.cellIndex;

戻り値

  • 見出しセル(th要素)のインデックス番号。
  • 「0」から始まる点に注意。

$tableElementReference.rows[0].getElementsByTagName("th")[0].cellIndex; // 表の1行目の1つ目の見出しセル(th要素)のインデックス番号「0」

サンプル

カーソルを合わせた見出しセル(th要素)のインデックス:

ヘッダ1 ヘッダ2 ヘッダ3
1行目1列目 1行目2列目 1行目3列目
2行目1列目 2行目2列目 2行目3列目
3行目1列目 3行目2列目 3行目3列目

サンプルの動作について

表の背景色が薄い青色の見出しセルにカーソルを合わせると、その見出しセルの背景色を黄色にする。「カーソルを合わせた見出しセル(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>

HTML

<p>
    カーソルを合わせた見出しセル(th要素)のインデックス:<span id="sampleOutput"></span>
</p>
<table id="sample">
    <tr>
        <th>ヘッダ1</th>
        <th>ヘッダ2</th>
        <th>ヘッダ3</th>
    </tr>
    <tr>
        <td>1行目1列目</td>
        <td>1行目2列目</td>
        <td>1行目3列目</td>
    </tr>
    <tr>
        <td>2行目1列目</td>
        <td>2行目2列目</td>
        <td>2行目3列目</td>
    </tr>
    <tr>
        <td>3行目1列目</td>
        <td>3行目2列目</td>
        <td>3行目3列目</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>

スポンサード リンク

カテゴリー: DOM, JavaScript, Thオブジェクト, リファレンス パーマリンク