ホーム >>> HTML整理ノート

displayスタイル:表に活用 2

各年の表題をクリックすれば、内容の表示/非表示を切り替えれます。 

2001年日本橋ソフト価格調査
2000年日本橋ソフト価格調査
1999年日本橋ソフト価格調査

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function Price(id_name){
  id_name.style.display = (id_name.style.display == "none") ? "block" : "none";
}
--></script>
</head>

<body>
<table border="1" cellspacing="0" width="500" style="font:12px">
 <caption style="background-color:silver;color:green;cursor:hand"
    onclick="Price(t2001)">2001年日本橋ソフト価格調査</caption>
 <tbody id="t2001" style="display:none"> 
 <tr style="color:#0000FF;text-align:center"> 
  <td width="309" height="34">(ソフト名) </td>
  <td width="65" height="34">(調査日)</td>
  <td width="56" height="34">Sofmap</td>
  <td width="55" height="34">J &amp; P</td>
  <td width="55" height="34">ニノミヤ</td>
  <td width="56" height="34">T-ZONE</td>
 </tr>

・・・(以下は省略)・・・