質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1446閲覧

javascriptを用いて、チェックボックスによってhtml上の表の任意の行を表示/非表示させたいです。

20200713

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/12/21 17:10

編集2020/12/22 07:20

前提・実現したいこと

htmlとjavascriptを用いて、
チェックボックスのオンオフによって表の任意の行を表示/非表示させたいです。
jsの方で、trのIDを用いて該当の行を取得し動作させたいです。

該当のソースコード

html

1修正前 2<form name="form1"> 3 <input checked type="checkbox" id="check1" onClick="displayTR_checkbox(this,'tr1');"><label for="check1">tr1</label><br> 4    <input checked type="checkbox" id="check2" onClick="displayTR_checkbox(this,'tr2');"><label for="check2">tr2</label> 5 6 <table class="picTable"> 7 <tr id="tr1"> 8 <td><img src="http://placehold.jp/150x150.png"></td> 9 <td><img src="http://placehold.jp/150x150.png"></td> 10 <td><img src="http://placehold.jp/150x150.png"></td> 11 </tr> 12 <tr id="tr2"> 13 <td><img src="http://placehold.jp/150x150.png"></td> 14 <td><img src="http://placehold.jp/150x150.png"></td> 15 <td><img src="http://placehold.jp/150x150.png"></td> 16 </tr> 17 </table> 18 </form> 19 20修正後 21<form name="form1"> 22 <input checked type="checkbox" id="check1" onClick="displayTR_checkbox('check1','tr1');"><label for="check1">tr1</label><br> 23 <input checked type="checkbox" id="check2" onClick="displayTR_checkbox('check2','tr2');"><label for="check2">tr2</label> 24 25 <table class="picTable"> 26 <tr id="tr1"> 27 <td><img src="http://placehold.jp/150x150.png"></td> 28 <td><img src="http://placehold.jp/150x150.png"></td> 29 <td><img src="http://placehold.jp/150x150.png"></td> 30 </tr> 31 <tr id="tr2"> 32 <td><img src="http://placehold.jp/150x150.png"></td> 33 <td><img src="http://placehold.jp/150x150.png"></td> 34 <td><img src="http://placehold.jp/150x150.png"></td> 35 </tr> 36 </table> 37 </form>

javascript

1修正前 2function displayTR_checkbox(this,trID){ 3 var TR = document.getElementById(trID); 4 if(checkbox.checked = false){ 5 TR.style.display = none; 6 } else { 7 TR.style.display = block; 8 } 9} 10修正後 11function displayTR_checkbox(checkboxID,trID){ 12 var TR = document.getElementById(trID); 13 var Checkbox = document.getElementById(checkboxID); 14 if(! Checkbox.checked){ 15 TR.style.display = ''; 16 } else { 17 TR.style.display = 'none'; 18 } 19}

試したこと

cssの方が複雑になってきたため、今回行の表示/非表示はjsで行いたいです。
知識不足で大変申し訳ございませんが、助言いただけましたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/12/21 19:05

質問のソースコードで問題なく動くと思うのですが、理想の挙動にならないのでしょうか?
babu_babu_baboo

2020/12/21 19:43

× if(checkbox.checked = false){ 〇 if(! checkbox.checked){
m.ts10806

2020/12/21 21:18

miyabi_takatsukさん >質問のソースコードで問題なく動くと思うのですが エラー出てるので動かないかと。(Chrome,Firefox)
20200713

2020/12/22 07:03

皆様助言いただきありがとうございます。 以前の質問https://teratail.com/questions/311223で問題自体は解決したのですが、 チェックボックスのオンオフによる関数?としてJavascriptに記載したく 改めて別の質問として投稿させていただきました。
miyabi_takatsuk

2020/12/22 08:11

m.ts10806さん > 細かく確認してなかった… なるほどです。
guest

回答2

0

ベストアンサー

  1. 関数の定義側の引数に「this」はNG。エラー:SyntaxError: missing formal parameter

JavaScriptの予約語でもあるので「変数名」として使えません。別の変数名に置き換えてください。
0. =だと代入しているだけ。if(checkbox.checked = false){ 「条件式」としては成り立つのでエラーにはなりません
0. checkboxという変数はどこから出てきた?
ここはおそらく渡した「自身」のチェックボックス要素をおさめた変数が入るはず
0. block noneという変数はどこから出てきた?
どこにも定義していないならあくまでプロパティでここの定義は「文字列」になるはず

未チェックから入った場合に見た目がおかしくなる指定(trに対するdisplay:block)もあるのはありますが、
これでそれっぽく動くようになります(手元のChrome,Firefoxで確認済み)。

まずは、エラー確認デバッグを癖づけるようにしてください。

投稿2020/12/21 21:32

編集2020/12/21 21:32
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/12/21 21:33

なお、実際に要件通りできあがる回答となっているので間違っている点ありましたら 何も考え無しに低評価押す前にコメントでご指摘ください。
20200713

2020/12/22 07:23

回答いただきありがとうございます。 1. 以前他の方のコードにて自分自身のタグを呼び出す際に'this'と表記されているものがあったので使っておりましたが、避けるよう気をつけます。 2. 3. 4.について修正しましたところ無事正しい動作になりました!感謝致します。 コードのエディターとしてmac, atomを利用しているのですが、 これまでhtml等さわる際は正しく表示されるかのみで、エラー確認やデバッグを行うことありませんでした。 参考に伺えましたら嬉しいのですが、 自分の環境でhtml, css, javascriptを勉強するのにおすすめのエディターなどございますでしょうか? 当初の質問から脱線した内容で大変申し訳ございませんが お教えいただけましたら嬉しいです…!
miyabi_takatsuk

2020/12/22 08:13 編集

横槍失礼します。 > 自分の環境でhtml, css, javascriptを勉強するのにおすすめのエディターなどございますでしょうか? は、まず自分で調べて、どうしてもわからなければ、別質問立てましょう。 コメントの応答で扱い切れる話題ではありません。
20200713

2020/12/22 08:59

参考に伺えたらという思いで失礼いたしました… 自分の方でもう少し調べてみます!ご助言いただきありがとうございます! 迅速に解決していただけましたのでこの度はこちらをベストアンサーにさせていただきます。
guest

0

tr要素のdisplay は、''ではなく、'table-row'

js

1<form name="form1"> 2 <p> 3 <label><input checked type="checkbox" name="hoge0" value="0">tr0</label><br> 4 <label><input checked type="checkbox" name="hoge0" value="1">tr1</label> 5 </p> 6 7 <table class="picTable"> 8 <tr> 9 <td><img src="http://placehold.jp/150x150.png"> 10 <td><img src="http://placehold.jp/150x150.png"> 11 <td><img src="http://placehold.jp/150x150.png"> 12 <tr> 13 <td><img src="http://placehold.jp/150x150.png"> 14 <td><img src="http://placehold.jp/150x150.png"> 15 <td><img src="http://placehold.jp/150x150.png"> 16 </tr> 17 </table> 18</form> 19 20<script> 21 22function displayTR_checkbox(rowIndex, checked){ 23 const table = document.querySelector ('table.picTable'); 24 let TR = table.rows[rowIndex]; 25 TR.style.display = checked ? 'table-row': 'none'; 26} 27 28function handler ({target:e}) { 29 if (/^hoge\d*$/.test (e.name)) 30 displayTR_checkbox (e.value, e.checked); 31} 32 33document.querySelector ('form').addEventListener ('click', handler, false); 34</script> 35 36

投稿2020/12/22 08:29

babu_babu_baboo

総合スコア616

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

20200713

2020/12/22 08:57

ご回答いただきありがとうございます! ''のままでも思った動作だったため間違いに気が付きませんでした… こちら参考に修正させていただきました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問