###前提・実現したいこと
||name|name_id|class|
|:--|:--:|--:|
|[ ]|John|47|88|
|[ ]|Bob|36|83|
|[ ]|Jane|23|88|
|[ ]|Keny|46|82|
|[ ]|Ann|32|88|
|[ ]|Curry|29|83|
上記のような表があり、例えば「John」の列をクリックすると、
||name|name_id|class|
|:--|:--:|--:|
|[x]|John|47|88|
|[ ]|Jane|23|88|
|[ ]|Ann|32|88|
このようにJohnのところにチェックが入り、違うクラスの人は非表示になり、
||name|name_id|class|
|:--|:--:|--:|
|[x]|John|47|88|
|[x]|Jane|23|88|
|[ ]|Ann|32|88|
このようにチェックして「実行」などのボタンを押すと、JohnとJaneのname_idがリストで取得できる
というようなものを作りたいのですが、JSが完全に初心者で全く手がつかない状態です。
コード
HTML
1<div class="width-max"> 2 <div class="width-max"> 3 <table class="text-center" width="100%"> 4 <thead> 5 <tr> 6 <th class="cols" width="7%">Check</th> 7 <th class="cols" width="31%">name</i></th> 8 <th class="cols" width="31%">name_id</th> 9 <th class="cols" width="31%">class</th> 10 </tr> 11 </thead> 12 </table> 13 </div> 14 <div class="width-max" style="height: 400px; overflow: auto;"> 15 <table class="text-center" width="100%"> 16 <tbody> 17 {% for person in person_list %} 18 <tr class="person{{person.id}}"> 19 <td width="7%"><input type="checkbox" name="#" value=""></td> 20 <td width="31%">{{person.name}}</td> 21 <td width="31%">{{person.id}}</td> 22 <td width="31%">{{person.class.id}}</td> 23 </tr> 24 {% endfor %} 25 </tbody> 26 </table> 27 </div> 28</div> 29
###試したこと
JavaScript
1$(document).ready(function() { 2 $('table tr').click(function() { 3 var $c = $(this).children('td').children('input[type=checkbox]'); 4 if ($c.prop('checked')) { 5 $c.prop('checked', ''); 6 } else { 7 $c.prop('checked', 'checked'); 8 } 9 }); 10}); 11 12$('#ClickAndHide tr').live('click', function() { 13 var $cur_tr = $(this)[0]; 14 console.log($cur_tr.id) // とりあえずコンソールで表示しようとした 15});
###補足情報(言語/FW/ツール等のバージョンなど)
ここで取得したデータをDjango1.11でFormデータとして利用しようとしています。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー