データセルとヘッダとフッタのマルスオーバー時、異なる色で列をハイライト表示する表

マウスのポインタ(カーソル)をデータセルに合わせた時と、ヘッダに合わせた時と、フッタに合わせた時、それぞれ異なる色で列をハイライト表示する機能を、JavaScriptで、表(table要素)に実装する方法。

実装例

表のタイトル
ヘッダ1 ヘッダ2 ヘッダ3 ヘッダ4 ヘッダ5
1-1 1-2 1-3 1-4 1-5
2-1 2-2 2-3 2-4 2-5
3-1 3-2 3-3 3-4 3-5
フッタ1 フッタ2 フッタ3 フッタ4 フッタ5

ソースコード

JavaScript

<script type="text/javascript">

window.onload = function(){

    var $sampleTable = document.getElementById( "sample" );
    var $sampleColgroup = $sampleTable.getElementsByTagName( "colgroup" );
    var $sampleTHead = $sampleTable.tHead;
    var $sampleTHeadCells = $sampleTHead.rows[0].cells;
    var $sampleTBodies = $sampleTable.tBodies;
    var $sampleTFoot = $sampleTable.tFoot;
    var $sampleTFootCells = $sampleTFoot.rows[0].cells;

    for ( var $tbodyIndex = 0; $tbodyIndex < $sampleTBodies.length; $tbodyIndex++ ) {
        var $sampleTBodyRows = $sampleTBodies[$tbodyIndex].rows;
        for ( var $rowIndex = 0; $rowIndex < $sampleTBodyRows.length; $rowIndex++ ) {
            var $sampleTBodyCells = $sampleTBodyRows[$rowIndex].cells;
            for ( var $cellIndex = 0; $cellIndex < $sampleTBodyCells.length; $cellIndex++ ) {
                $sampleTBodyCells[$cellIndex].onmouseover = function(){
                    changeBackgroundColor( $sampleColgroup[this.cellIndex], "yellow" );
                    changeBackgroundColor( $sampleTHeadCells[this.cellIndex], "gold" );
                    changeBackgroundColor( $sampleTFootCells[this.cellIndex], "gold" );
                };
                $sampleTBodyCells[$cellIndex].onmouseout = function(){
                    changeBackgroundColor( $sampleColgroup[this.cellIndex], "" );
                    changeBackgroundColor( $sampleTHeadCells[this.cellIndex], "" );
                    changeBackgroundColor( $sampleTFootCells[this.cellIndex], "" );
                };
            }
        }
    }

    for ( var $cellIndex = 0; $cellIndex < $sampleTHeadCells.length; $cellIndex++ ) {
        $sampleTHeadCells[$cellIndex].onmouseover = function(){
            changeBackgroundColor( $sampleColgroup[this.cellIndex], "gold" );
            changeBackgroundColor( $sampleTHeadCells[this.cellIndex], "yellow" );
            changeBackgroundColor( $sampleTFootCells[this.cellIndex], "gold" );
        };
        $sampleTHeadCells[$cellIndex].onmouseout = function(){
            changeBackgroundColor( $sampleColgroup[this.cellIndex], "" );
            changeBackgroundColor( $sampleTHeadCells[this.cellIndex], "" );
            changeBackgroundColor( $sampleTFootCells[this.cellIndex], "" );
        };
    }

    for ( var $cellIndex = 0; $cellIndex < $sampleTFootCells.length; $cellIndex++ ) {
        $sampleTFootCells[$cellIndex].onmouseover = function(){
            changeBackgroundColor( $sampleColgroup[this.cellIndex], "gold" );
            changeBackgroundColor( $sampleTHeadCells[this.cellIndex], "gold" );
            changeBackgroundColor( $sampleTFootCells[this.cellIndex], "yellow" );
        };
        $sampleTFootCells[$cellIndex].onmouseout = function(){
            changeBackgroundColor( $sampleColgroup[this.cellIndex], "" );
            changeBackgroundColor( $sampleTHeadCells[this.cellIndex], "" );
            changeBackgroundColor( $sampleTFootCells[this.cellIndex], "" );
        };
    }

}

function changeBackgroundColor( $elementReference, $color ){
    $elementReference.style.backgroundColor = $color;
}

</script>

HTML

<table id="sample">
    <caption id="sampleCaption">
        表のタイトル
    </caption>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <thead>
        <tr>
            <th>ヘッダ1</th>
            <th>ヘッダ2</th>
            <th>ヘッダ3</th>
            <th>ヘッダ4</th>
            <th>ヘッダ5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
            <td>1-5</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
            <td>2-5</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
            <td>3-5</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>フッタ1</th>
            <th>フッタ2</th>
            <th>フッタ3</th>
            <th>フッタ4</th>
            <th>フッタ5</th>
        </tr>
    </tfoot>
</table>

CSS

<style>
#sampleCaption {
    border-top: double;
    font-size: inherit;
    margin: 0px;
    padding: 3px;
    background-color: lightgreen;
}
#sample tr,
#sample th,
#sample td {
    background-color: inherit;
    font-size: inherit !important;
    color: inherit !important;
}
#sample thead,
#sample tfoot {
    background-color: lightblue;
}
#sample {
    border: double !important;
}
#sample thead {
    border-bottom: double;
}
#sample tfoot {
    border-top: double;
}
</style>

スポンサード リンク

カテゴリー: JavaScript, , 逆引き パーマリンク