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

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

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

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

3回答

1106閲覧

Jqueryでチェックボックスを利用してtableにある複数imgタグのclass属性の追加・削除が行えない

hidepon

総合スコア206

JavaScript

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2017/11/02 05:49

編集2017/11/02 06:04

JQuery を用いてテーブル内のimgタグに設定されているclass の属性値を追加・削除しようとしています。
チェックボックスの選択・解除によってclassの属性値を追加・削除するというものです。

<table class="table" id="tbl_image"> <tbody> <tr><th>画像1</th> <td><img src="/image/test1.jpg" class="thumb" /></td> <td><p>&lt;img src="/image/test.jpg" class="img-responsive" /&gt;</p></td> <td><input type="button" name="images0" class="update_image" value="更新する" /> </td> <td><input type="checkbox" name="align" class="align-center" value="1" />中央寄せ </td> </tr> <tr> <th>画像2</th> <td><img src="/image/test2.jpg" class="thumb" /></td> <td><p>&lt;img src="/image/test2.jpg" class="img-responsive" /&gt;</p> </td> <td><input type="button" name="images1" class="update_image" value="更新する" /> </td> <td><input type="checkbox" name="align" class="align-center" value="1" />中央寄せ </td> </tr> ・ ・ (中略) ・ ・ </tbody> </table>

このチェックボックスを選択すると以下のJavaScriptを駆動してimgタグ中のclass属性を追加削除したいです。

//チェックボックスをクリック $('input:checkbox').change(function(){ var num = $(".align-center").index(this); if($(this).prop("checked") == true){ $("tr:eq(" + num + ") td p img").addClass("center-block"); }else{ $("tr:eq(" + num + ") td p img").removeClass("center-block"); } });

alertでチェックボックスの選択状態の判定はうまくいっていますが、class属性の追加・削除の部分がうまく反映されていません。
どこがおかしいでしょうか?

宜しくお願いいたします。

(追記)pタグに囲まれたimg タグの文字列中にあるclass 属性部分のところを動的に変更したと思います。

(さらに追記)この場合の追記は文字列の置き換えになるのかな?と思えてきました。
replace()を使うんかな?と。

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

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

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

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

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

guest

回答3

0

相対位置を取ればよいのでは?

javascript

1$(function(){ 2 $('input[type=checkbox]').on('change',function(){ 3 $(this).closest("tr").find("td:first img").toggleClass("center-block",$(this).prop("checked")); 4 }); 5}); 6

追記

textに書いてあるclassをいじるんね
ちょっと無理矢理になりますが、こんなかんじでどうでしょう

javascript

1$(function(){ 2 $('input[type=checkbox]').on('change',function(){ 3 var p=$($(this).closest("tr").find("td:eq(1) p")); 4 var tag=$(p.text()).toggleClass("center-block",$(this).prop("checked")); 5 p.text(tag.prop("outerHTML")); /*jQueryらしく修正*/ 6 }); 7});

HTML

1<table class="table" id="tbl_image"> 2<tbody> 3<tr><th>画像1</th> 4<td><img src="/image/test1.jpg" class="thumb" /></td> 5<td><p>&lt;img src="/image/test.jpg" class="img-responsive" /&gt;</p></td> 6<td><input type="button" name="images0" class="update_image" value="更新する" /> 7</td> 8<td><input type="checkbox" name="align" class="align-center" value="1" />中央寄せ 9</td> 10</tr> 11<tr> 12<th>画像2</th> 13<td><img src="/image/test2.jpg" class="thumb" /></td> 14<td><p>&lt;img src="/image/test2.jpg" class="img-responsive" /&gt;</p> 15</td> 16<td><input type="button" name="images1" class="update_image" value="更新する" /> 17</td> 18<td><input type="checkbox" name="align" class="align-center" value="1" />中央寄せ 19</td> 20</tr> 21</tbod> 22</table>

投稿2017/11/02 06:07

編集2017/11/02 06:45
yambejp

総合スコア114572

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

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

hidepon

2017/11/02 06:12

ご回答有難うございます。質問内容を編集したのですが、対象となるimgは2番目になります。2番目のimgは文字列として表示しているので、実際にはタグではありません。html上にimgタグの書き方を提示してコピペで利用してもらうという部分です。なので文字列の置換なのかな?とか思っています。
yambejp

2017/11/02 06:39

一部空タグの閉じ方が変わったりしますが、追記のとおりでどうでしょうか?
yambejp

2017/11/02 06:49

一部ブラウザでプロパティの順番がかわったりするのでご注意ください
hidepon

2017/11/02 06:55

いつもご回答有難うございます。ちょっと、超初心者のコードなのですが var imgText = $("tr:eq(" + num + ") td p").text(); imgText = imgText.replace('class="img-responsive"', 'class="img-responsive center-block"'); $("tr:eq(" + num + ") td p").text(imgText) としてみました。これでなんとか実現できたのですが、良いのでしょうか?あまり自信がありません・・・orz で削除は逆を書きました。
yambejp

2017/11/02 07:05

今回のケースであればダイレクトに書き換えてるのでかまわないでしょう もっと省略するとすれば「class=」もいらないですね 「"img-responsive"」を「"img-responsive center-block"」へまたはその逆 ただし直接文字列を書き換える場合汎用性が低くなります たとえばクラスをいくつも付け替えしたいとなると相当無理がでてきます
hidepon

2017/11/02 07:19

ご回答有難うございます。確かにclass=の部分は要らないですね。さらに確かに汎用性という意味ではマズいですね。本当に有難うございます。
guest

0

<p>&lt;img /&gt;</p>

見た感じタグがHTMLエンティティに変換されていてhtmlタグとしての機能を果たしていないようですが。

投稿2017/11/02 06:04

m.ts10806

総合スコア80765

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

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

hidepon

2017/11/02 06:08

いつも本当に有難うございます!!!!これはHtml上で文字列として表示したいので、このようにしています。ということは「pタグの中身」ということで処理すればいいということですね!?だんだんわかってきたような気がします。適格なアドバイス有難うございます!!!!!
m.ts10806

2017/11/02 07:43

> ということは「pタグの中身」ということで処理すればいいということですね!? ん、ちょっと何を仰っているのか分からないですが、 たぶん理解されてないような、、、、HTMLエンティティは単なる文字列なので タグとしてjQueryから参照させるのは困難という話なんですが、 まあひとまず解決したようで良かったです。
guest

0

自己解決

//チェックボックスをクリック $('input:checkbox').change(function(){ var num = $(".align-center").index(this); if($(this).prop("checked") == true){ var imgText = $("tr:eq(" + num + ") td p").text(); imgText = imgText.replace('img-responsive', 'img-responsive center-block'); $("tr:eq(" + num + ") td p").text(imgText) }else{ var imgText = $("tr:eq(" + num + ") td p").text(); imgText = imgText.replace('img-responsive center-block', 'img-responsive'); $("tr:eq(" + num + ") td p").text(imgText) } });

投稿2017/11/02 07:23

hidepon

総合スコア206

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問