チュートリアルメニュー
【jQuery】テーブルセルのハイライト
| A | B | C | D | E | F | G | |
|---|---|---|---|---|---|---|---|
| a | 1-1 | 1-2 | 1-3 | 1-4 | 1-5 | 1-6 | 1-7 |
| b | 2-1 | 2-2 | 2-3 | 2-4 | 2-5 | 2-6 | 2-7 |
| c | 3-1 | 3-2 | 3-3 | 3-4 | 3-5 | 3-6 | 3-7 |
| d | 4-1 | 4-2 | 4-3 | 4-4 | 4-5 | 4-6 | 4-7 |
| e | 5-1 | 5-2 | 5-3 | 5-4 | 5-5 | 5-6 | 5-7 |
| f | 6-1 | 6-2 | 6-3 | 6-4 | 6-5 | 6-6 | 6-7 |
| g | 7-1 | 7-2 | 7-3 | 7-4 | 7-5 | 7-6 | 7-7 |
- テーブルセルのハイライトとは
- マウスカーソルを重ねると同行同列のセルがハイライト表示されるテーブルを作成します。データを見やすくする工夫のひとつです。
解説
- コンテンツのつくりかた
-
HTML
<table>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
</tr>
<tr>
<th>a</th>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
<td>1-6</td>
<td>1-7</td>
</tr>
<tr>
<th>b</th>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
<td>2-6</td>
<td>2-7</td>
</tr>
<tr>
<th>c</th>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
</tr>
<tr>
<th>d</th>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
</tr>
<tr>
<th>e</th>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
<td>5-6</td>
<td>5-7</td>
</tr>
<tr>
<th>f</th>
<td>6-1</td>
<td>6-2</td>
<td>6-3</td>
<td>6-4</td>
<td>6-5</td>
<td>6-6</td>
<td>6-7</td>
</tr>
<tr>
<th>g</th>
<td>7-1</td>
<td>7-2</td>
<td>7-3</td>
<td>7-4</td>
<td>7-5</td>
<td>7-6</td>
<td>7-7</td>
</tr>
</table>
CSS
//テーブルのハイライト
.target td, td.target{
background:rgba(0,0,0,.4);
}
JS
/*テーブルのハイライト*/
$(function(){
$(".table_cell_display td").hover(function(){
//マウスオーバー
$(this).parent().addClass("target");
var myIndex = $(this).index();
myIndex++;
$("td:nth-child(" + myIndex + ")").addClass("target");
}, function(){
//マウスアウト
$(".target").removeClass("target");
});
});/*function*/
プロフィール
| 名前 | いとう ともお |
|---|---|
| 仕事 | PCの修理受付・取扱説明書作成 |
| 好物 | 大豆食品 |
| スキル |
|
