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