jqueryで表・テーブルのデータ・行を抽出・表示します。

jQueryでtableのデータ・行を表示・非表示。CSSのclassを使ってデータの紐付けをしています。

ヘッダーで、jQuery.jsと後述のdatatable.jsを読み込んでいます。
クリックした項目のclassと同じclassのデータ・行を表示・非表示しています。

JSを読み込みます

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/datatable.js"></script>

[datatable.js]JavaScript

$(function(){
	//表をストライプ表示
	$(".mod_datatable table th:nth-child(odd)").addClass("odd");
	$(".mod_datatable table tr:nth-child(odd)").addClass("odd");
	//選択したクラス行のみ表示
	$("ul.mod_koumokulist li a").click(function(){
		var year = $(this).attr("class");
		$(".mod_datatable table tr").css("display","none");
		$(".mod_datatable table tr.title,tr." + year).show(); 
		return false;
	});
	//全てを表示
	$("li.mod_LabelAll a").click(function(){
		$(".mod_datatable table tr").show(); 
			return false;
	});
});

HTMl

<div class="mod_datatable">
<ul>
<li class="mod_LabelAll" style="width:200px;"><a href="#tbl_top">すべて表示する</a></li>
</ul>

<ul class="mod_koumokulist">
<li>1930年</li>
<li>1931年</li>
<li>1932年</li>
<li>1933年</li>
<li><a class="1934" href="#1934">1934年</a></li>
<li><a class="1935" href="#1935">1935年</a></li>
<li><a class="1936" href="#1936">1936年</a></li>
<li><a class="1937" href="#1937">1937年</a></li>
<li><a class="1938" href="#1938">1938年</a></li>
<li>1939年</li>
<li><a class="1950" href="#1950">1950年</a></li>
<li>1951年</li>
<li><a class="1952" href="#1952">1952年</a></li>
<li><a class="1953" href="#1953">1953年</a></li>
<li><a class="1954" href="#1954">1954年</a></li>
<li><a class="1955" href="#1955">1955年</a></li>
<li><a class="1956" href="#1956">1956年</a></li>
<li><a class="1957" href="#1957">1957年</a></li>
<li><a class="1958" href="#1958">1958年</a></li>
<li><a class="1959" href="#1959">1959年</a></li>
</ul>
<table id="tbl_top">
  <tr class="1934" id="1934"> 
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
</tr>
  <tr class="1934">
    <td>1934年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
  <tr class="1934">
    <td>1934年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
  <tr class="1934">
    <td>1934年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
  <tr class="1935" id="1935">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1935">
    <td>1935年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1935">
    <td>1935年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1935">
    <td>1935年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1936" id="1936">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1936">
    <td>1936年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1937" id="1937">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1937">
    <td>1937年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1938" id="1938">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1938">
    <td>1938年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1950" id="1950">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1950">
    <td>1950年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
  <tr class="1950">
    <td>1950年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1952" id="1952">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1952">
    <td>1952年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
  <tr class="1952">
    <td>1952年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1953" id="1953">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1953">
    <td>1953年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
  <tr class="1953">
    <td>1953年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1953">
    <td>1953年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
  <tr class="1954" id="1954">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1954">
    <td>1954年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1955" id="1955">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1955">
    <td>1955年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
  <tr class="1955">
    <td>1955年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1955">
    <td>1955年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1955">
    <td>1955年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
  <tr class="1955">
    <td>1955年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1956" id="1956">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1956">
    <td>1956年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1956">
    <td>1956年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1957" id="1957"> 
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1957">
    <td>1957年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1957">
    <td>1957年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1957">
    <td>1957年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1957">
    <td>1957年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1957">
    <td>1957年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1957">
    <td>1957年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958" id="1958">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1958">
    <td>1958年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
    <tr class="1959" id="1959">
    <th scope="col">年</th>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">備考</th>
  </tr>
  <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
    <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
    <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
    <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
    <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
    <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
    <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
    <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>  <tr class="1959">
    <td>1959年</td>
    <td>項目1の内容</td>
    <td>項目2の内容</td>
    <td>項目3の内容</td>
    <td>備考欄なのでいろいろ詳細が入ります</td>
  </tr>
  </table>
<!--mod_datatable_end--></div>

CSS

/* リスト部分 */
.mod_datatable ul li{
	min-height:7px;
	height:auto!important;
	height:7px;
	padding:0 0 0 8px;
	background:transparent url("gnavi_mark.gif") no-repeat scroll left 0.4em;
}
.mod_datatable ul li a:link    {color:#669900; text-decoration:none;}
.mod_datatable ul li a:visited {color:#669900; text-decoration:none;}
.mod_datatable ul li a:hover   {color:#FFF; text-decoration:none; background-color:#669900;}
.mod_datatable ul li a:active  {color:#FFF; text-decoration:none; background-color:#669900;}

/* 項目リスト部分 */
.mod_datatable ul.mod_koumokulist{
	width:500px;/* リストの幅 */
	overflow:hidden;
	position:relative;
}
.mod_datatable ul.mod_koumokulist li{
	width:4.5em;
	float:left;
	white-space: nowrap; /* IE6文章途中で折り返さない */
}
/* データ表部 */
.mod_datatable table{
	border-collapse: collapse;
	border-left:1px solid #bbb;
	border-tpp:1px solid #bbb;
	border-bottom:1px solid #bbb; /* IE6抽出後の下線表示 */
}
/* 見出し行 */
.mod_datatable table th{
	color:#fff;
	font-size:110%;
	text-align:center;
	background-color:#675E58;
}
.mod_datatable table th,
.mod_datatable table td{
	padding:5px;
	border-right:1px solid #bbb;
	border-bottom:1px solid #bbb;
}
/* しましま色設定 */
.odd{
	background-color:#DEDCDA;
}