重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

jQueryでテーブル行の表示・非表示

解決済

  • 質問者：lsdp
  • 質問日時：
  • 回答数：1件

JavaScript・jQueryでテーブル行(trタグ)の表示・非表示を
切り替えるスクリプトを以下のように作成しましたが
うまく動きません。

dispChg()内で
非表示に設定したクラス名(hid)を追加し
全行を非表示にできていますが
次の該当trから
非表示に設定したクラス名(hid)の削除がうまくいかないようです。

JavaScriptの引数からクラス名を引き継げないのでしょうか。

どなたか修正できる方がいらっしゃいましたら
教えてください。
よろしくお願いいたします。



<html>
<head>
<title>test</title>
<style type="text/css">
<!--
.hid
{
display:none
}
-->
</style>

<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>

<script type="text/javascript">
<!--

function dispChg(trClass){
/* まず全行を非表示 */
$('tr[class]').addClass('hid');

/* 該当の行を表示 */
$('tr[class*=trClass]').removeClass('hid');

}

-->
</script>

</head>

<body bgcolor=#ffffff topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<input type="button" value="全部表示" onclick="dispChg('atype btype ctype dtype')">
<input type="button" value="a" onclick="dispChg('atype')">
<input type="button" value="b" onclick="dispChg('btype')">
<input type="button" value="c" onclick="dispChg('ctype')">
<input type="button" value="d" onclick="dispChg('dtype')">

<table border="1">
<tr class="atype"><td>a</td></tr>
<tr class="btype"><td>b</td></tr>
<tr class="ctype"><td>c</td></tr>
<tr class="dtype"><td>d</td></tr>
</table>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

*スクリプト部-関数差し替え


function dispChg(trClass){
if(trClass) {
$('tr[class*="type"]').addClass('hid');//全て非表示
$('.'+trClass).removeClass('hid');//指定行を表示
} else {
$('tr[class*="type"]').removeClass('hid');//全て表示
}
}

*HTML部-一行だけ変更、dispChgの引数省略で全て表示
<input type="button" value="全部表示" onclick="dispChg()">
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報