mrs.suzu841.com 管理人の四方山(よもやま) tips





edit.gif マウスを乗せると背景色が変化する行のあるテーブル


テーブルで選択した行などの色を変えたいときには、 " 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>&nbsp;テキスト1</td>
  <td>&nbsp;テキスト2</td>
  <td>&nbsp;テキスト3</td>
 </tr>
 <tr  onMouseOver="this.style.backgroundColor='#a4b4f2'" onMouseOut="this.style.backgroundColor='#ffffff'">
  <td>&nbsp;テキスト4</td>
  <td>&nbsp;テキスト5</td>
  <td>&nbsp;テキスト6</td>
 </tr>
 <tr  onMouseOver="this.style.backgroundColor='#a4b4f2'" onMouseOut="this.style.backgroundColor='#ffffff'">
  <td>&nbsp;テキスト7</td>
  <td>&nbsp;テキスト8</td>
  <td>&nbsp;テキスト9</td>
 </tr>
 <tr  onMouseOver="this.style.backgroundColor='#a4b4f2'" onMouseOut="this.style.backgroundColor='#ffffff'">
  <td>&nbsp;テキスト10</td>
  <td>&nbsp;テキスト11</td>
  <td>&nbsp;テキスト12</td>
 </tr>
</table>