お盆前からお盆明けまで悩んでようやく実装できたのでソースを公開します。
表示／非表示ボタンのinputタグと、折り畳みたい部分のtrタグに同じクラス名（任意）を指定します。

プレビュー

【2010/09/10追記】
さらに追記。
jQueryのバージョンを最新にしたところ、IE8でも動作しました。
同じIE8でも、旧バージョンからアップグレードしたものなら
以前のjQueryでも動作したようです。
全く理解できない...。

【2010/09/09追記】
IE8で動作しなかったことがさらに発覚。

<meta http-equiv="X-UA-Compatible" content="IE=7" />

で強制的に互換モードにして対応しました。
IEイヤ。

【2010/08/18追記】
IEで動作しませんでした...。。

var trshow = $(this).attr("class");

↓

var trshow = $(this).attr("className");

で解決しました。

■JavaScript

$(function(){
$("#sets input").click(function () {
var trshow = $(this).attr("className");
$("tr"+"."+trshow).toggle();
} 
); 
});

■HTML

<table id="sets">
<tr>
<td>0001　ああああ<br />
<input type="button" class="set01" value="セット内表示/非表示" /></td>
</tr>
<tr class="set01 set">
<td>サンプルサンプル</td>
</tr>
<tr class="set01 set">
<td>サンプルサンプル</td>
</tr>
<tr>
<td>0002　いいい<br />
<input type="button" class="set02" value="セット内表示/非表示" /></td>
</tr>
<tr class="set02 set">
<td>サンプルサンプル</td>
</tr>
<tr class="set02 set">
<td>サンプルサンプル</td>
</tr>
</table>

■CSS

.set
 {
	display: none;
}

Tweet