※ ChatGPTを利用し、要約された質問です(原文:jQueryでテーブル行の表示・非表示)
jQueryでテーブル行の表示・非表示
このQ&Aのポイント
JavaScript・jQueryを使用して、テーブルの行(trタグ)を表示・非表示に切り替えるスクリプトを作成しましたが、うまく動作しません。
dispChg関数内で非表示に設定したクラス名(hid)を追加して、全ての行を非表示にすることはできますが、次の該当する行から非表示に設定したクラス名(hid)を削除することができません。
JavaScriptの引数からクラス名を引き継ぐことができないようです。修正方法をご教示いただける方がいらっしゃいましたら、お願いします。
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>