マウスのポインタ（カーソル）を合わせたデータ行をハイライト表示する機能を、JavaScriptで、表（table要素）に実装する方法。
実装例
| ヘッダ１ | ヘッダ２ | ヘッダ３ | ヘッダ４ | ヘッダ５ |
|---|---|---|---|---|
| １－１ | １－２ | １－３ | １－４ | １－５ |
| ２－１ | ２－２ | ２－３ | ２－４ | ２－５ |
| ３－１ | ３－２ | ３－３ | ３－４ | ３－５ |
| フッタ１ | フッタ２ | フッタ３ | フッタ４ | フッタ５ |
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function(){
var $sampleTable = document.getElementById( "sample" );
var $sampleTBodies = $sampleTable.tBodies;
for ( var $tbodyIndex = 0; $tbodyIndex < $sampleTBodies.length; $tbodyIndex++ ) {
var $sampleTBodyRows = $sampleTBodies[$tbodyIndex].rows;
for ( var $rowIndex = 0; $rowIndex < $sampleTBodyRows.length; $rowIndex++ ) {
$sampleTBodyRows[$rowIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
};
$sampleTBodyRows[$rowIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
}
</script>
window.onload = function(){
var $sampleTable = document.getElementById( "sample" );
var $sampleTBodies = $sampleTable.tBodies;
for ( var $tbodyIndex = 0; $tbodyIndex < $sampleTBodies.length; $tbodyIndex++ ) {
var $sampleTBodyRows = $sampleTBodies[$tbodyIndex].rows;
for ( var $rowIndex = 0; $rowIndex < $sampleTBodyRows.length; $rowIndex++ ) {
$sampleTBodyRows[$rowIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
};
$sampleTBodyRows[$rowIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
}
</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>
<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>
#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>