
よろしくお願い致します。
以下の記述でエラーが出てしまいます。
見よう見まねで書いているので、根本的に間違っているのでしょうか・・・。
function open_close_hide(){
var row = document.getElementsByClass('hide');
if (row.style.display == 'none') {
row.style.display = '';
} else {
row.style.display = 'none';
}
}
テーブルの非表示にしたい行は<tr class = "hide">としています。
クリックする部分は
<a href=\"javascript:void(0):\" onClick=\"open_close_rowhide();return false;\">表示/非表示</a>
としています
document.getElementByIDで一行ごとに非表示にするのには成功したのですが、
classで複数行を同時非表示にすることが出来ません。
getElementsByClassNameでも駄目でした。
詳しい方がおられましたら、よろしくお願い致します。
No.3ベストアンサー
- 回答日時:
こんな感じでどう?
<style>
tr.hide{display:none;}
tr.display{display:table-row !important;}
</style>
<!--[if IE]>
<style>
tr.display{display:block !important;}
</style>
<![endif]-->
<script>
function open_close_rowhide(obj){
var v=obj.innerHTML;
var tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
var cn=tr[i].className;
if(cn.match(/(^| )hide(?= |$)/)){
if(cn.match(/(^| )display(?= |$)/) && v=="非表示"){
cn=cn.replace(/(^| )display(?= |$)/,'');
}else if(!cn.match(/(^| )display(?= |$)/) && v=="表示"){
cn+=" display";
}
tr[i].className=cn;
}
}
obj.innerHTML=v=="表示"?"非表示":"表示";
return false;
}
</script>
<a href="#" onClick="return open_close_rowhide(this);">表示</a>
<table border>
<tr><th>test</th></tr>
<tr><td>1</td></tr>
<tr class="hide"><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr class="hide display"><td>5</td></tr>
<tr class="hide display aaa"><td>6</td></tr>
</table>
回答ありがとうございます。
まさにやりたかった挙動を完璧にしてくれました。
書きませんでしたが、最初は非表示にしておきたかったので、その点でも完璧です。
PHPからの出力でしたが、それも問題ありませんでした。
しかし、何回読んでもコードの意味が難しくて分からない・・・これを機にもっと勉強したいと思います。
どうもありがとうございました。
No.2
- 回答日時:
getElementsByClassNameを使用し、ループ処理で1つずつセットしてください。
No.1
- 回答日時:
リファレンスをしっかり読みましょう。
getElementsByClassなんてものは定義されていません。
参考URL:http://www.openspc2.org/JavaScript/JavaScript_DO …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP PHP MySql ページング 2 2022/09/20 06:38
- Visual Basic(VBA) Excel VBA キーワードから列を取得して、さらに空欄行を非表示にする 3 2022/10/21 22:49
- JavaScript JavaScript?jQuery?で書き方を教えてください。 初心者です。 AAAという要素をステ 2 2023/08/04 22:09
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 6 2022/06/08 12:55
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML中のTABLEのデータを抽出す...
-
jqueryでどうやってエスケープ?
-
【UWSC】HTML内のある部分を抽...
-
javascript クリックすると、あ...
-
jqueryとscriptでTABLEのセルを...
-
プルダウンメニューの件でお願...
-
HTMLのテーブルの値と同じ値を...
-
ブログのタグ挿入の入力支援
-
サイトのリロード間隔を選択で...
-
html内>テーブル内に複数のjav...
-
入力欄を動的に増減させる
-
Selectボックスの幅を自動で広...
-
チェックボックスのON/OFFでVal...
-
iframeのURLを取得してinputタ...
-
CSVファイルを読みこみ、プルダ...
-
javaScriptの変数をJavaの変数...
-
javaScriptで連動セレクトメニュー
-
value内に変数を入れたい
-
tbody要素のinnerHTMLが書き換...
-
submitCheckの書き方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
クリックされた罫表セルの行番...
-
tableの任意行にfocusをあてる
-
javascript クリックすると、あ...
-
チェックボックスにチェックが...
-
マウスをブラウザの外に出した...
-
ブルダウン選択でページの表示...
-
Excelで作ったhtmlファイルのサ...
-
スクロールバーの表示位置を変...
-
動的なtableの値を取得したい
-
ツールチップにテーブル左端列...
-
【UWSC】HTML内のある部分を抽...
-
別ページからOnclickでテーブル...
-
【JQuery】テーブルで行選択さ...
-
JSで、テーブルのある行のみ、...
おすすめ情報