memo.xight.org

日々のメモ

カーソルを合わせると行の色が変わるテーブル

pya! の投稿者一覧 のようなテーブルが作りたい.

  <tr>タグに onmouseover属性と onmouseout 属性を付加する.
  横長の表の時に有効.
<table>
	<tr>
		<th>&nbsp;</th><th>1列目</th><th>2列目</th><th>3列目</th><th>4列目</th><th>5列目</th><th>6列目</th>
	</tr>
	<tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
		<th>1行目</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>
	</tr>
	<tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
		<th>2行目</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>
	</tr>
	<tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
		<th>3行目</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>
	</tr>
</table>

 1列目2列目3列目4列目5列目6列目
1行目1-11-21-31-41-51-6
2行目2-12-22-32-42-52-6
3行目3-13-23-33-43-53-6

Reference

  MSDN Japan - MSDN Library - Dynamic HTML - onmouseover
  http://www.microsoft.com/japan/msdn/library/ja/jpisdk/dhtml/references/events/onmouseover.asp
  MSDN Japan - MSDN Library - Dynamic HTML - onmouseout
  http://www.microsoft.com/japan/msdn/library/ja/jpisdk/dhtml/references/events/onmouseout.asp
  pya! - 投稿者一覧
  http://pya.cc/tourank2.php