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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

397閲覧

テーブル要素各行にあるチェックボックスの状態により<tr>要素の背景色を変えたい(addClass使用)

Taichirou

総合スコア12

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2022/05/13 06:23

編集2022/05/17 11:53

○環境
IDE:VisualStudio 14.0.23107.0
テンプレート:MVC
言語:VB.NET
Javascript
jQuery

○実現したい事
ページ読み込み時にテーブル要素の各行に存在する
チェックボックスが
チェックオンならその行の背景色を赤くする。(addClass)
チェックオフならその行の背景色は元に戻す。(removeClass)

○現状のソース

Javascript

1 $(document).ready(function () { 2 for (var i = 0; i < $('.data-row').length; i++) { 3 if ($('.ng-flg').get(i).checked) { 4 $('.data-row').eq(i).addClass('ng-row'); 5 } 6 else { 7 $('.data-row').eq(i).removeClass('ng-row'); 8 } 9 } 10 });

HTML

1<table class="list-data"> 2 <thead> 3 <tr> 4 <th><input type="checkbox"></th> 5 <th>コード</th> 6 <th>名前</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr class="data-row"> 11 <th><input type="checkbox" class="ng-flg"></th> 12 <td>100</th> 13 <td>田中</th> 14 </tr> 15 <tr class="data-row"> 16 <th><input type="checkbox" class="ng-flg"></th> 17 <td>200</th> 18 <td>佐藤</th> 19 </tr> 20 <tr class="data-row"> 21 <th><input type="checkbox" class="ng-flg"></th> 22 <td>300</th> 23 <td>鈴木</th> 24 </tr> 25 </tbody> 26</table> 27

同じクラス名でも.eq(~)で、~番目と指定できると考えているのですが
上手くいきません・・・。

ご教授いただければ幸いです。

質問内容に不足など御座いましたら、ご指摘ください。

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

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

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

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

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

yambejp

2022/05/13 06:51

チェックボックスの付け外しで背景色をかえる(classをかえる)必要はないのでしょうか?
退会済みユーザー

退会済みユーザー

2022/05/13 07:03

質問の内容は html, css, javascript だけの話で、タグの ASP.NETVB.NET は直接関係ないようですが、そうであれば関係ないタグは外してください。タグで見ている自分のようなものにとっては、はっきり言って迷惑なのです。 関係あるならどう関係するかを書いてください。
int32_t

2022/05/13 07:06

ページ読み込み時だけに ng-row クラスを足すのでしたら、質問文にあるコードで動くように見えます。質問文の HTML ではチェックされていないので何も起きませんが。
Taichirou

2022/05/17 02:44

yambejp様 画面表示時の状態で背景色を切り替えたいため チェックボックスの付け外しでの切り替えは不要となります。 SurferOnWww様 タグを修正いたしました。 int32_t様 HTMLは実際のものから一部抜粋しておりますが 実際はいくつかチェック済みのものが存在しております。
int32_t

2022/05/17 02:51

質問文にあるJavaScriptコードとHTMLで試してみましたか? 「上手くいきません・・・。」というのは具体的にどういう状態になるのでしょうか。
guest

回答2

0

javascript

1<style> 2.ng-row{ 3 background-Color:red; 4} 5</style> 6<script> 7$(function(){ 8 $('.ng-flg').on('change',function(){ 9 $(this).closest('.data-row').toggleClass('ng-row',$(this).is(':checked')); 10 }).trigger('change'); 11}); 12</script>

投稿2022/05/13 06:57

編集2022/05/13 06:57
yambejp

総合スコア114583

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

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

0

自己解決

回答が遅くなり大変申し訳ございませんでした。
試行錯誤し、以下の様に「CSSを直接付与する」「文字色を変更する(仕様変更)」とすると
想定していた動きとなりました。

Javascript

1if ($('.ng-flg').get(i).checked) { 2 $('.data-row').eq(i).css('color','red'); 3} 4else { 5 $('.data-row').eq(i).css('color','black'); 6}

投稿2022/05/17 02:51

Taichirou

総合スコア12

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

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

int32_t

2022/05/17 02:53

それで動くということは、質問文に含まれていなかった CSS の記述に問題があったのだろうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問