thObject.headersプロパティ

thObject.headersは、表(table要素)における見出しセル(th要素)のheaders属性値を取得、もしくは、設定するプロパティ。

headers属性には、関連する見出しセル(th要素)のid属性値を指定できる。

構文

取得

$thElementReference.headers;

戻り値

headers属性値。関連する見出しセル(th要素)のid属性値。

設定

$thElementReference.headers = "ids";
ids
関連する見出しセル(th要素)のid属性値。スペース区切りで、複数の見出しセル(th要素)のid属性値指定することもできる。

サンプル

カーソルを合わせた見出しセル(th要素)のheaders属性値:

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

サンプルの動作について

表の背景色が薄い青色の2行目の見出しセル(th要素)にカーソルを合わせると、その見出しセル(th要素)の背景色を黄色にする。「カーソルを合わせた見出しセル(th要素)のheaders属性値:」の右横に、カーソルを合わせた見出しセル(th要素)のheaders属性値を表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function(){
    var $sampleRows = document.getElementById( "sample" ).rows;
    var $sampleCells = $sampleRows[1].cells;
    for ( var $cellIndex = 0; $cellIndex < $sampleCells.length; $cellIndex++ ) {
        $sampleCells[$cellIndex].onmouseover = function(){
            this.style.backgroundColor = "yellow";
            document.getElementById( "sampleOutput" ).innerHTML = this.headers;
        };
        $sampleCells[$cellIndex].onmouseout = function(){
            this.style.backgroundColor = "";
        };
    }
}
</script>

HTML

<p>
    カーソルを合わせた見出しセル(th要素)のheaders属性値:<span id="sampleOutput"></span>
</p>
<table id="sample">
    <tr>
        <th id="sampleHeader1">ヘッダ1-1</th>
        <th id="sampleHeader2">ヘッダ1-2</th>
        <th id="sampleHeader3">ヘッダ1-3</th>
    </tr>
    <tr>
        <th headers="sampleHeader1">ヘッダ2-1</th>
        <th headers="sampleHeader2">ヘッダ2-2</th>
        <th headers="sampleHeader3">ヘッダ2-3</th>
    </tr>
    <tr>
        <td headers="sampleHeader1">1行目1列目</td>
        <td headers="sampleHeader2">1行目2列目</td>
        <td headers="sampleHeader3">1行目3列目</td>
    </tr>
    <tr>
        <td headers="sampleHeader1">2行目1列目</td>
        <td headers="sampleHeader2">2行目2列目</td>
        <td headers="sampleHeader3">2行目3列目</td>
    </tr>
    <tr>
        <td headers="sampleHeader1">3行目1列目</td>
        <td headers="sampleHeader2">3行目2列目</td>
        <td headers="sampleHeader3">3行目3列目</td>
    </tr>
</table>

CSS

<style>
#sample {
    background-color: white;
}
#sample tr,
#sample td {
    font-size: inherit !important;
    color: inherit !important;
    background-color: inherit;
}
#sample th {
    font-size: inherit !important;
    color: inherit !important;
    background-color: lightblue;
}
</style>

スポンサード リンク

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