マウスを乗せると背景色が変化する行のあるテーブル
テーブルで選択した行などの色を変えたいときには、 " onmouseover " " onmouseout " を使って指定します。
" onmouseover " でマウスが乗ったときの行の背景色を指定し、 " onmouseout " でマウスが外れたときの行の背景色を指定します。
sample : 選択した時の背景色を #a4b4f2 とし、マウスがはずれたら背景色が #ffffff に戻るように指定してみました。
テキスト1 |
テキスト2 |
テキスト3 |
テキスト4 |
テキスト5 |
テキスト6 |
テキスト7 |
テキスト8 |
テキスト9 |
テキスト10 |
テキスト11 |
テキスト12 |
<table width="50%" border=1 cellspacing="0" align="center" >
<tr onMouseOver="this.style.backgroundColor='#a4b4f2'" onMouseOut="this.style.backgroundColor='#ffffff'">
<td> テキスト1</td>
<td> テキスト2</td>
<td> テキスト3</td>
</tr>
<tr onMouseOver="this.style.backgroundColor='#a4b4f2'" onMouseOut="this.style.backgroundColor='#ffffff'">
<td> テキスト4</td>
<td> テキスト5</td>
<td> テキスト6</td>
</tr>
<tr onMouseOver="this.style.backgroundColor='#a4b4f2'" onMouseOut="this.style.backgroundColor='#ffffff'">
<td> テキスト7</td>
<td> テキスト8</td>
<td> テキスト9</td>
</tr>
<tr onMouseOver="this.style.backgroundColor='#a4b4f2'" onMouseOut="this.style.backgroundColor='#ffffff'">
<td> テキスト10</td>
<td> テキスト11</td>
<td> テキスト12</td>
</tr>
</table>