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

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

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

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

Q&A

解決済

1回答

2132閲覧

チェックのついた列のクラス以外の列をJavaScriptで非表示にして、チェック付きの部分だけDjangoで処理する

gragragrao

総合スコア14

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

0グッド

0クリップ

投稿2017/06/07 04:26

編集2017/06/07 05:13

###前提・実現したいこと
||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データとして利用しようとしています。

よろしくお願いします。

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

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

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

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

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

kei344

2017/06/07 04:46

HTMLを質問文に追記してください。
gragragrao

2017/06/07 05:13

情報に不備があり申し訳ありません。HTMLを追加いたしました。
guest

回答1

0

ベストアンサー

ちょっとやってみました

javascript

1$(function(){ 2 $('#t1 [type=checkbox]').on('change',function(){ 3 var flg=$('#t1:has(:checked)').length>0; 4 var cls=!flg?"":$(this).closest('tr').find('td:nth-child(4)').text(); 5 $(this).closest('tbody').find('tr').show().filter(function(){ 6 return $(this).find('td:nth-child(4)').text()!==cls; 7 }).toggle(!flg); 8 }); 9 $('[type=button][value=go]').on('click',function(){ 10 var arr=[]; 11 $('#t1 tr:has(:checked)').find('td:nth-child(3)').each(function(){ 12 /*気持ちが悪いのでちょっとだけなおしました*/ 13 arr.push($(this).text()); 14 }); 15 console.log(arr); 16 }); 17}); 18

HTML

1<table border id="t1"> 2<thead> 3<tr><th></th><th>name</th><th>name_id</th><th>class</th></tr> 4</thead> 5<tbody> 6<tr><td><input type="checkbox"></td><td>John</td><td>47</td><td>88</td></tr> 7<tr><td><input type="checkbox"></td><td>Bob</td><td>36</td><td>83</td></tr> 8<tr><td><input type="checkbox"></td><td>Jane</td><td>23</td><td>88</td></tr> 9<tr><td><input type="checkbox"></td><td>Keny</td><td>46</td><td>82</td></tr> 10<tr><td><input type="checkbox"></td><td>Ann</td><td>32</td><td>88</td></tr> 11<tr><td><input type="checkbox"></td><td>Curry</td><td>29</td><td>83</tr> 12</tbody> 13</table> 14<input type="button" value="go">

投稿2017/06/07 05:56

編集2017/06/07 06:18
yambejp

総合スコア114585

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

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

gragragrao

2017/06/07 06:08

早速の回答ありがとうございます! うまくいきました!! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問