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

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

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

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

jQuery

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

Q&A

解決済

2回答

7533閲覧

JavaScriptのクリックイベント時にクリック対象が複数ある場合の処理について

Smar

総合スコア40

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/04/04 10:29

編集2016/04/06 00:43

いつもお世話になります。
js、jQueryに関して質問です。

現在、テーブルの行をクリックした際にその列の色を変える、というものを作成中です。
(正確にはdatatablesのライブラリを使用して選択される行は常に1行のみ、という形にしています。)

<tr>のクリックイベントの関数内にてクラスをremoveまたはaddすることで配色の変更自体は問題なく動いたのですが、 追加条件としてその行内に含まれるチェックボックスをクリックした時だけは色を変えない、という処理を行いたいのです。 <tr>のクリックイベント関数内にてチェックボックスがクリックされた場合は除外にてreturn、のようにしてみたのですが、どうもうまく動きません。

lang

1$(function() { 2 3 var table = $('#example').DataTable(); 4 5 $('#example tbody').on( 'click', 'tr', function () { 6 7 // ここでチェックボックスクリック時だけreturn? 8 // ここでのif文の書き方が悪いかとは思っているのですが… 9 10 if ( $(this).hasClass('selected') ) { 11 // クリックされた行が選択中の処理 12 } else { 13 // クリックされた行が未選択の処理 14 } 15 16 } ); 17 18} );

ざっくりなサンプルですいません…。

datatablesのクリックにての1行選択はそのまま以下のものを使用しました。
https://datatables.net/examples/api/select_single_row.html

どなたかお力をお貸しください。

※追記です※

テーブル状態はほぼサンプル状態ではありますが、例えば以下のような形になります。

lang

1<table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> 2 <thead> 3 <tr> 4 <th>-</th> 5 <th>Name</th> 6 <th>Position</th> 7 <th>Office</th> 8 <th>Age</th> 9 <th>Start date</th> 10 <th>Salary</th> 11 </tr> 12 </thead> 13 <tbody> 14 <tr> 15 <td><input type="checkbox" name="chk_1" id="chk_1" value="chk_1"></td> 16 <td>Tiger Nixon</td> 17 <td>System Architect</td> 18 <td>Edinburgh</td> 19 <td>61</td> 20 <td>2011/04/25</td> 21 <td>$320,800</td> 22 </tr> 23 <tr> 24 <td><input type="checkbox" name="chk_2" id="chk_2" value="chk_2"></td> 25 <td>Accountant</td> 26 <td>Tokyo</td> 27 <td>63</td> 28 <td>2011/07/25</td> 29 <td>$170,750</td> 30 </tr> 31 <tr class="selected"> 32 <td><input type="checkbox" name="chk_3" id="chk_3" value="chk_3"></td> 33 <td>Ashton Cox</td> 34 <td>Junior Technical Author</td> 35 <td>San Francisco</td> 36 <td>66</td> 37 <td>2009/01/12</td> 38 <td>$86,000</td> 39 </tr> 40 <tr> 41 <td><input type="checkbox" name="chk_4" id="chk_4" value="chk_4"></td> 42 <td>Cedric Kelly</td> 43 <td>Senior Javascript Developer</td> 44 <td>Edinburgh</td> 45 <td>22</td> 46 <td>2012/03/29</td> 47 <td>$433,060</td> 48 </tr> 49 </tbody> 50</table>

よろしくお願い致します。

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

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

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

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

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

think49

2016/04/04 13:49

発想は間違っていないと思うのでその延長線でコードを書きますが、table要素のサンプルを下さい。HTMLをこちらで用意するのは少し手間がかかります。
Smar

2016/04/05 00:25

コメントありがとうございます。 ほぼサンプル状態ではありますが、テーブル概要を追記致しました。 よろしくお願い致します。
think49

2016/04/05 12:10

回答しました。ところで、HTML/CSS/JSはmarkdown記法を使うと読みやすいように整形されます。https://teratail.com/help
Smar

2016/04/06 00:47

markdownの件、ご指摘ありがとうございます。 今まで全く知らず投稿しておりました…。
guest

回答2

0

あまりスマートじゃないかもですが、イベントバブリングを止めてしまえばいいのではないかと思いました。

javascript

1$(function() { 2 3 var table = $('#example').DataTable(); 4 5 $('#example').on( 'click', 'tr', function () { //その2 6 if ( $(this).hasClass('selected') ) { 7 // クリックされた行が選択中の処理 8 } else { 9 // クリックされた行が未選択の処理 10 } 11 } ); 12 $('#example tbody').on( 'click', 'input', function (e) { //その1 13 e.stopPropagation(); 14 } ); 15 16} );

コードは適切に直して使ってほしいです。

難しいことはしていないので大丈夫かと思いますが、念のため簡単に解説します。

テーブル内をクリックした時に発生するイベント処理は、その1、その2の順になります。これは#exampleよりも#example tbodyの方が、クリックされた要素から見て内側にあるからです。
そこで、その1のイベント処理が発生した時にstopPropagationメソッドでイベントバブリングを止めてしまえば、その2のイベント処理まで伝播せず、イベント処理が止まる、ということです。

投稿2016/04/04 12:05

Lhankor_Mhy

総合スコア35813

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

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

Smar

2016/04/05 00:14

ありがとうございます! テストにて動作確認できました! 内側から外側に~であればこういった途中停止というやり方もあるんですね…。 勉強になりました、ありがとうございます。
guest

0

ベストアンサー

event.target で例外処理を作れば良いと思います。
(jQuery#on は第二引数を指定すると event.currentTarget (this) を書き換える仕様なんですね。DOM Events とは異なる処理で少し戸惑いました…。)

HTML

1<table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> 2 <thead> 3 <tr> 4 <th>-</th> 5 <th>Name</th> 6 <th>Position</th> 7 <th>Office</th> 8 <th>Age</th> 9 <th>Start date</th> 10 <th>Salary</th> 11 </tr> 12 </thead> 13 <tbody> 14 <tr> 15 <td><input type="checkbox" name="chk_1" id="chk_1" value="chk_1"></td> 16 <td>Tiger Nixon</td> 17 <td>System Architect</td> 18 <td>Edinburgh</td> 19 <td>61</td> 20 <td>2011/04/25</td> 21 <td>$320,800</td> 22 </tr> 23 <tr> 24 <td><input type="checkbox" name="chk_2" id="chk_2" value="chk_2"></td> 25 <td>Accountant</td> 26 <td>Tokyo</td> 27 <td>63</td> 28 <td>2011/07/25</td> 29 <td>$170,750</td> 30 </tr> 31 <tr class="selected"> 32 <td><input type="checkbox" name="chk_3" id="chk_3" value="chk_3"></td> 33 <td>Ashton Cox</td> 34 <td>Junior Technical Author</td> 35 <td>San Francisco</td> 36 <td>66</td> 37 <td>2009/01/12</td> 38 <td>$86,000</td> 39 </tr> 40 <tr> 41 <td><input type="checkbox" name="chk_4" id="chk_4" value="chk_4"></td> 42 <td>Cedric Kelly</td> 43 <td>Senior Javascript Developer</td> 44 <td>Edinburgh</td> 45 <td>22</td> 46 <td>2012/03/29</td> 47 <td>$433,060</td> 48 </tr> 49 </tbody> 50</table> 51 52<script type="text/javascript"> 53'use strcit'; 54jQuery('#example').on('click', 'tr', function (event) { 55 var target = event.target, tr; 56 57 if (target.tagName === 'INPUT' && target.type === 'checkbox') { 58 return; 59 } 60 61 tr = jQuery(this); 62 63 if (tr.hasClass('selected')) { 64 tr.removeClass('selected'); 65 console.log('selected'); 66 } else { 67 tr.addClass('selected'); 68 console.log('not selected'); 69 } 70}); 71</script>

Re: Smar さん

投稿2016/04/05 12:09

think49

総合スコア18156

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

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

Smar

2016/04/06 04:10

ありがとうございます。 `event.target`での分岐、勉強になりました。 こちらの方法ですとcheckboxやinput以外の何かでまた同じようなことをさせたい場合でも細かく例外処理を作れそうですね。 マークダウンの件もありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問