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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

Q&A

解決済

2回答

1565閲覧

テーブルの値のチェック?後、更新する方法

tsuru0508

総合スコア65

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/01/30 08:48

編集2017/01/30 10:48

###前提・実現したいこと
PHP,MySQL,bootstrap3を使用しています。

下記画像のようなテーブルで、対象にチェックをいれて
データを更新するのですが、資格のところに違うものが
入っていれば「混在していますよ」というエラーを
POSTする前に行いたいと考えています。

イメージ説明

もし実現可能であれば、JQueryか、Javascriptだと思うのですが、
1、実現は可能でしょうか?
2、可能な場合、何を使いますか?
3、参考になるサイトとかありますか?

なんとなく出来そうな気がしますが、検索ワードも思いつきません。
ご存知の方、ご指導お願い申し上げます。

*プログラムを追加させていただきます。

<div class="col-xs-12"> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th nowrap="">対象</th> <th>&nbsp;</th> <th nowrap="">所属部署</th> <th nowrap="">名前</th> <th nowrap="">資格</th> </tr> </thead> <tbody> <tr> <td><div class="text-center"><input type="checkbox" name="sentaku[]" value="1"></div></td> <td><div class="text-center"><button type="button" class="btn btn-default btn-xs" onclick="viewJump('1');">詳細</button></div></td> <td nowrap>総務経理部</td> <td nowrap>山田 いちろう</td> <td nowrap>FP2</td> </tr> <tr> <td><div class="text-center"><input type="checkbox" name="sentaku[]" value="2"></div></td> <td><div class="text-center"><button type="button" class="btn btn-default btn-xs" onclick="viewJump('2');">詳細</button></div></td> <td nowrap>総務経理部</td> <td nowrap>山田 二郎</td> <td nowrap>FP2</td> </tr> <tr> <td><div class="text-center"><input type="checkbox" name="sentaku[]" value="3"></div></td> <td><div class="text-center"><button type="button" class="btn btn-default btn-xs" onclick="viewJump('3');">詳細</button></div></td> <td nowrap>総務経理部</td> <td nowrap>山田 三郎</td> <td nowrap>FP1</td> </tr> <tr> <td><div class="text-center"><input type="checkbox" name="sentaku[]" value="4"></div></td> <td><div class="text-center"><button type="button" class="btn btn-default btn-xs" onclick="viewJump('4');">詳細</button></div></td> <td nowrap>総務経理部</td> <td nowrap>田中 四郎</td> <td nowrap>FP2</td> </tr> <tr> <td><div class="text-center"><input type="checkbox" name="sentaku[]" value="5"></div></td> <td><div class="text-center"><button type="button" class="btn btn-default btn-xs" onclick="viewJump('5');">詳細</button></div></td> <td nowrap>総務経理部</td> <td nowrap>井上 五郎</td> <td nowrap>FP2</td> </tr> <tr> <td><div class="text-center"><input type="checkbox" name="sentaku[]" value="6"></div></td> <td><div class="text-center"><button type="button" class="btn btn-default btn-xs" onclick="viewJump('6');">詳細</button></div></td> <td nowrap>総務経理部</td> <td nowrap>佐藤 花子</td> <td nowrap>FP1</td> </tr> </tbody> </table> </div> </div> <!-- col-xs-12 -->

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

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

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

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

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

kei344

2017/01/30 09:19

具体的に出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記いただいたほうが回答を得られやすいと思います。
tsuru0508

2017/01/30 09:33

ありがとうございます。後ほど、貼り付けさせて頂きます。申し訳ありません。
tsuru0508

2017/01/30 11:02

先ほどソースを貼り付けさせていただきました。
guest

回答2

0

ベストアンサー

対象にチェックを入れたとして、あとどの部分がユーザーの入力可能部分なのでしょうか?
あと対象と資格を具体的にどのように紐付けていますか?
(nameやidで処理?)
そのあたりがわかるソースを追記されたほうがよろしいかと

#追記
対象と資格の間に紐付けがないと言っていますが、相関関係をはっきりさせておかないと
データ更新できないと思いますが・・・
taishoやsikakuには連番をふって、taishoのvalueにレコードのidを入れると
SQL側に処理させやすいと思います。

なお、今回のケースについてajaxが適当かどうかはもう少し詳しく状況をきいてみないとわかりません

javascript

1<script> 2$(function(){ 3 $('input[type=button][value=check]').on('click',function(){ 4 var x=[]; 5 var y=[]; 6 $('[type=checkbox]:checked').filter(function(i,j){if(r=j.name.match(/taisho\[(\d+)\]/)) x.push(r[1]);}); 7 for(var i=0;i<x.length;i++){ 8 y.push($('[type=text][name="sikaku['+x[i]+']"').val()); 9 } 10 var z=y.filter(function (x, i, self) { 11 return self.indexOf(x) === i; 12 }); 13 console.log(z) 14 if(z.length==0){alert('一つもチェックされてない');} 15 if(z.length==1){alert('資格は1種類');} 16 if(z.length>1){alert('資格は複数');} 17 }); 18}); 19</script> 20<form> 21<input type="checkbox" name="taisho[0]" value="10"><input type="text" name="sikaku[0]" value="FP1"><br> 22<input type="checkbox" name="taisho[1]" value="12"><input type="text" name="sikaku[1]" value="FP1"><br> 23<input type="checkbox" name="taisho[2]" value="15"><input type="text" name="sikaku[2]" value="FP2"><br> 24<input type="checkbox" name="taisho[3]" value="18"><input type="text" name="sikaku[3]" value="FP1"><br> 25<input type="button" value="check"> 26</form> 27

ajax版

補足を見る限り以下のように、taishoのチェックされたvalだけ拾ってpostでcheck用phpに流し
そこでSQLでcount(*)を取ればよいかなと

javascript

1<script> 2$(function(){ 3 $('input[type=button][value=check]').on('click',function(){ 4 var x=[]; 5 $('[type=checkbox][name="taisho[]"]:checked').each(function(){ 6 x.push($(this).val()); 7 }); 8 $.ajax({ 9 url:"check.php", 10 type:"post", 11 data:{taisho:x}, 12 dataType:"text", 13 success:function(data){ 14 console.log(data); 15 }, 16 error:function(data,txt){ 17 console.log(txt); 18 }, 19 }); 20 }); 21}); 22</script> 23<form> 24<input type="checkbox" name="taisho[]" value="10">FP1<br> 25<input type="checkbox" name="taisho[]" value="12">FP1<br> 26<input type="checkbox" name="taisho[]" value="15">FP2<br> 27<input type="checkbox" name="taisho[]" value="18">FP1<br> 28<input type="button" value="check"> 29</form> 30

投稿2017/01/30 08:58

編集2017/01/30 13:48
yambejp

総合スコア114585

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

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

tsuru0508

2017/01/30 09:10

いつもありがとうございます。 このテーブルの上に、input type textの枠があって、 そこにコメントいれて、下のテーブルの中から対象者を選び 登録しようとしています。 ソースは、後ほど貼り付けさせて頂きます。 対象と資格は紐付いてません。trと/trの中にあるだけです。 mysqlからデータぬいて、ループさせながらテーブルを作成しています。 紐づける方法もわかってません。 対象は、name=taisyou[]で、バリューにDBテーブルのidを与えて いますので、ポスト後は、判定する事は可能です。
tsuru0508

2017/01/30 09:13

追記です。 ajaxで同期通信で、phpの世界に持ち込んで処理を 考えましたが、過去にもajax使うなら非同期でしょうと ご指導頂き、うむむとなっている所です。 すいません。。。
yambejp

2017/01/30 09:34

対象と資格の紐付けとnameをつかった資格の洗い出しについて追記しておきます
tsuru0508

2017/01/30 10:58

ありがとうございます。 資格のところにIDをふってなくても、チェックボックスの値がテーブルのIDなので、 それをSQLで集めて、group byをかけたら、2レコード以上あれば、資格が混在する 事がわかるのでそれで、エラーを出せばいいと考えていました。 select sikaku from teble where in (チェックボックのID) group by sikaku それが、ajaxの同期通信でエラーを掛けたらいいかな?と考えていました。
yambejp

2017/01/30 12:39

認識が違ったらごめんなさい POSTする前にinputに保持されたデータを jQueryでバリデートしているのではないのでしょうか? SQLで処理できるのであればPOST後の方がよいような・・・
tsuru0508

2017/01/30 13:29

ありがとうございます。 POST後でエラーを出したら、値等をテキストボックスやチェックされた項目に 対してチェックをいれたりするのが面倒くさいので、POST前にチェックしようと 考えました。(更新ボタン押下前に戻す) javascriptで考えました。checkboxのvalueに値を二つつけて(id-sikaku)、 ループさせながら、splitで抜いて、値のチェックを行うものです。 思う通りのチェックになったのですが、違う値が入っていたときに、returnした際、 なぜだが、リロードしてしまって・・・不思議な状態で悩んでいます・・・ もうちょっと考えて、無理ならPOST後に実施することにします・・・ var elements = document.getElementsByName("sentaku[]"); var dt1 = ""; var dt2 = ""; var kekka = ""; var errmsg = 0; for(var i=0,l=elements.length; l>i; i++ ) { if( elements[i].checked ) { var dt1 = elements[i].value ; kekka = dt1.split("-"); if(i==0){ dt2 = kekka[1]; }else{ if(dt2!=kekka[1]){ errmsg = 1; } } } } if(errmsg==1){ alert('職種が混ざっています。'); return false; }
tsuru0508

2017/01/30 14:16

yambejpさま いつもありがとうございます。
guest

0

帰ってから回答しようと思っていたら解決していた・・・。とりあえず書きかけていたので置いておきます。

提示されたテーブルのまま「同じ資格のみしかクリックできない」をするコードです。

JavaScript

1$( _=> { 2 $( 'table' ).each( ( i, element ) => { 3 const licenses = $( 'tr > td:last-child', element ).map( ( i, e ) => $( e ).text() ).get().filter( ( x, i, self ) => self.indexOf( x ) === i ); 4 const $_tr = $( 'tr', element ).each( ( i, element ) => { 5 const val = $( 'td:last-child', element ).text(); 6 if ( !val ) { return; } 7 $( element ).data( 'lid', 'l' + licenses.indexOf( val ) ); 8 } ); 9 let flagg = false; 10 $( 'input', element ).on( 'change', ( ev ) => { 11 const $_self = $( ev.target ); 12 const lid = $_self.parents( 'tr' ).data( 'lid' ); 13 if ( flagg && lid !== flagg ) { 14 // error! 15 alert( 'Not equal!' ); 16 $_self.prop( 'checked', false ); 17 } else if ( !flagg && $_self.prop( 'checked' ) ) { 18 flagg = lid; 19 } else if ( flagg && !$_self.prop( 'checked' ) ) { 20 flagg = false; 21 } 22 } ).change(); 23 } ); 24} ); 25```**動くサンプル:**[https://jsfiddle.net/hak87e13/](https://jsfiddle.net/hak87e13/)

投稿2017/01/30 18:58

kei344

総合スコア69366

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

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

tsuru0508

2017/01/31 03:51

kei344さま いつも、ありがとうございます。 また、ソースまでありがとうございます。 動作は家に帰ってから、テストしてみます。 こんな方法があるとは、想像しませんでした。 大変勉強になります
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問