カーソル位置のテーブル（表）列の背景色をハイライトする方法｜DAD UNION

テーブル（表）の列にカーソルをもっていくとカーソル位置の列を赤くハイライトする方法をご紹介します。

Contents

カーソル位置のテーブル（表）列の背景色をハイライトするtableのCSS記述
カーソル位置のテーブル（表）列の背景色をハイライトするtableのHTML記述
テーブル（表）のカーソル位置の列背景を変更するJavaScript記述
カーソル位置のテーブル（表）列の背景を赤くハイライトするデモページ

カーソル位置のテーブル（表）列の背景色をハイライトするtableのCSS記述

※テーブル（表）#tbl1のCSS記述です。必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
#tbl1{
  width: 700px;
  margin: 0 auto;
}
#tbl1 tr,
#tbl1 th,
#tbl1 td {
    background-color: inherit;
    font-size: 14px;
    height: 40px;
}
#tbl1 thead,
#tbl1 tfoot {
    background-color: #cccccc;
}
#tbl1 {
    border: solid 1px #000000;
}
</style>

カーソル位置のテーブル（表）列の背景色をハイライトするtableのHTML記述

※テーブル（表）id=”tbl1″を用意し、colgroupタグを使って表内の列のグループを定義します。

<h1>テーブル（表）の列にカーソルをもっていくとカーソル位置の列が赤くハイライトします。</h1>

<table id="tbl1">
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
            <th>header5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer1</th>
            <th>footer2</th>
            <th>footer3</th>
            <th>footer4</th>
            <th>footer5</th>
        </tr>
    </tfoot>
</table>

テーブル（表）のカーソル位置の列背景を変更するJavaScript記述

※テーブル（id=”tbl”）セルがonmouseoverされると背景色を赤にし、onmouseoutで背景色を無しにしてます。

<script type="text/javascript">
window.onload = function(){
    var $tbl1Table = document.getElementById( "tbl1" );
    var $tbl1Colgroup = $tbl1Table.getElementsByTagName( "colgroup" );
    var $tbl1THeadCells = $tbl1Table.tHead.rows[0].cells;
    var $tbl1TFootCells = $tbl1Table.tFoot.rows[0].cells;
    var $tbl1Rows = $tbl1Table.rows;
    for ( var $rowidx = 0; $rowidx < $tbl1Rows.length; $rowidx++ ) {
        var $tbl1Cells = $tbl1Rows[$rowidx].cells;
        for ( var $cellIndex = 0; $cellIndex < $tbl1Cells.length; $cellIndex++ ) {
            $tbl1Cells[$cellIndex].onmouseover = function(){
                changebkc( $tbl1Colgroup[this.cellIndex], "red" );
                changebkc( $tbl1THeadCells[this.cellIndex], "red" );
                changebkc( $tbl1TFootCells[this.cellIndex], "red" );
            };
            $tbl1Cells[$cellIndex].onmouseout = function(){
                changebkc( $tbl1Colgroup[this.cellIndex], "" );
                changebkc( $tbl1THeadCells[this.cellIndex], "" );
                changebkc( $tbl1TFootCells[this.cellIndex], "" );
            };
        }
    }
}

function changebkc( $elementReference, $color ){
    $elementReference.style.backgroundColor = $color;
}
</script>