tableObject.captionコレクション

tableObject.captionは、表(table要素)のタイトル(caption要素)への参照。

構文

$tableElementReference.caption;

$tableElementReference.caption; // 表のタイトル(caption要素)への参照

サンプル

サンプルキャプション
1行目1列目 1行目2列目 1行目3列目
2行目1列目 2行目2列目 2行目3列目
3行目1列目 3行目2列目 3行目3列目

サンプルの動作について

背景色が薄い青色のサンプルキャプションにマウスポインタ(カーソル)を合わせると、背景色を黄色にする。マウスポインタ(カーソル)を外すと、元の薄い青色の背景色に戻す。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function(){
    var $sampleCaption = document.getElementById( "sample" ).caption;
    $sampleCaption.onmouseover = function(){
        this.style.backgroundColor = "yellow";
    };
    $sampleCaption.onmouseout = function(){
        this.style.backgroundColor = "";
    };
}
</script>

HTML

<table id="sample">
    <caption id="sampleCaption">
        サンプルキャプション
    </caption>
    <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>
#sampleCaption {
    font-size: inherit;
    margin: 0px;
    padding: 3px;
    background-color: lightblue;
    cursor: pointer;
}
#sample tr,
#sample td {
    background-color: inherit;
}
</style>

スポンサード リンク

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