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

投稿日: 2014年3月17日作成者: alphasis

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

実装例

表のタイトル
ヘッダ１	ヘッダ２	ヘッダ３	ヘッダ４	ヘッダ５
１－１	１－２	１－３	１－４	１－５
２－１	２－２	２－３	２－４	２－５
３－１	３－２	３－３	３－４	３－５
フッタ１	フッタ２	フッタ３	フッタ４	フッタ５

ソースコード

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>ヘッダ１</th>
<th>ヘッダ２</th>
<th>ヘッダ３</th>
<th>ヘッダ４</th>
<th>ヘッダ５</th>
</tr>
</thead>
<tbody>
<tr>
<td>１－１</td>
<td>１－２</td>
<td>１－３</td>
<td>１－４</td>
<td>１－５</td>
</tr>
<tr>
<td>２－１</td>
<td>２－２</td>
<td>２－３</td>
<td>２－４</td>
<td>２－５</td>
</tr>
<tr>
<td>３－１</td>
<td>３－２</td>
<td>３－３</td>
<td>３－４</td>
<td>３－５</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>フッタ１</th>
<th>フッタ２</th>
<th>フッタ３</th>
<th>フッタ４</th>
<th>フッタ５</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, 表, 逆引きパーマリンク