回答の条件によって、テーブルの特定のフィールド項目の表示/非表示を切換えたい

お疲れ様です。初めて投稿させていただきます。

希望する動きは、アプリ上のラジオボタンの回答結果(「表示」or「非表示」)によって、テーブルのフィールド項目のうち、左から8番目の「面談記録」と左から15番目の「備考」について、列ごと表示/非表示が切り換えるようにしたいのですが、添付のjavascriptでは、テーブルの1行目は希望する動作になるのですが、テーブルの2行目より下の行では上記列のフィールド項目が非表示にならない状況です。希望する動きを実現するためのヒントや助言をいただけると助かります。

 

querySelector は、「指定された CSS セレクターに最初に一致する要素を示す HTMLElement オブジェクト」を返します。

テーブルのように複数行存在する場合は、querySelectorAll で要素をすべて取得してループ処理が必要です。

 

他の方法としては、テーブルに特定のクラスで指定要素を非表示にするようにCSSを指定しておき、

条件によって、テーブルのクラスを追加・削除することでまとめて非表示制御するなどが考えられます。

 

早速のご助言ありがとうございます。

いただいた助言にて検討してみます。結果は後日報告させていただきます。

 

ご助言いただいたように、テーブルの行数を取得しループさせ、

各行に対し、「td:nth-child(‘数値’)」で表示/非表示させたい列を特定したうえで処理を行いました。

希望する動作が実現できました。ありがとうございました。

別の方法でご提示いただいた方法についても、大変参考になりました。