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>
No.1ベストアンサー
- 回答日時:
*スクリプト部-関数差し替え
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()">
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同一nameの input type="text"...
-
チェックボックス付きのテーブ...
-
画面の2重起動をチェックする...
-
テーブル内のチェックボックス...
-
フォームタグの中のラジオボタ...
-
history.backの前に値をクリア...
-
java scriptで問題集を作りたい...
-
JavaScriptの「.querySelectorA...
-
Response.Writeを使用して更新...
-
クリックしたラジオボタンの行...
-
チェックボックスの一括選択。...
-
ボタンクリックでフォーカス移動
-
ラジオボタン選択で「複数ラジ...
-
JavaSprictで時間取得と指定し...
-
フォームを必須項目にしたい
-
return trueとreturn falseの用...
-
Selectボックスの幅を自動で広...
-
【jsp/Java】チェックボックス...
-
<JavaScript>tableタグを入力不...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
localStorageでのcheckbox制御
-
複数のselect値で1つも選択され...
-
JavaScriptの「.querySelectorA...
-
Javascriptの電卓で最初の何も...
-
文字数を数える際に空白、改行...
-
formで項目を連結したい
-
jQueryで合計を出したい
-
Formのシリアライズができない
-
画面表示とともにtableの指定の...
-
テーブル内のチェックボックス...
-
入力チェックの外部スクリプト...
-
ラジオボタンが選択されたらテ...
-
VBSでの自動ログイン
-
Javascriptで自動的に計算する...
-
jQuery テキストボックス読み取...
-
同一nameの input type="text"...
-
ボタンクリックでフォーカス移動
-
画面の2重起動をチェックする...
-
送信ボタン連打を抑止したいです
おすすめ情報