いつもお世話になります。
js、jQueryに関して質問です。
現在、テーブルの行をクリックした際にその列の色を変える、というものを作成中です。
(正確にはdatatablesのライブラリを使用して選択される行は常に1行のみ、という形にしています。)
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>
よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー