テーブル(表)の列にカーソルをもっていくとカーソル位置の列を赤くハイライトする方法をご紹介します。
Contents
ディスプレイ広告
カーソル位置のテーブル(表)列の背景色をハイライトするtableのCSS記述
※テーブル(表)#tbl1のCSS記述です。必要に応じて書き換えてください。
<style type="text/css">
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>
カーソル位置のテーブル(表)列の背景を赤くハイライトするデモページ
カーソル位置のテーブル(表)列の背景を赤くハイライトするデモページ
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告
ディスプレイ広告