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

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

ただいまの
回答率

90.53%

  • PHP

    23558questions

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

  • JavaScript

    19927questions

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

  • jQuery

    7996questions

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

テーブルのセルに対しデータ追加・取得・表示をしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 369

ok_rich

score 3

 実現したいこと

phpとjavascriptでやりたいことがあるのですが勉強不足でどうしたらいいかわかりません。

具体的にはシフト表を作るシステムに携わっているのですがまず、
①シフト作成画面
左上のボタンをクリックすると勤務時間レパートリー登録画面へ行きます。
イメージ説明
②勤務時間レパートリー画面
ここで時間を入力し登録するとDBテーブル(time_repertory)に格納&シフト作成画面へリダイレクト
イメージ説明
③シフト割り当て画面
シフトを割り当てたい人の1日のセルをクリックするとモーダルウィンドウが開き登録された勤務時間レパートリー(A~:~,B~:~,C~:~)の3つのどれかをチェックで選択し追加を押すとDBテーブル(emp_shift)に保存され、データが入ってる日にちをクリックすると入れたABCのどれかにチェックは維持されたままで、違うレパートリーにチェックを入れ再び追加を押すとさっき登録したデータは削除し最新のデータを追加するようにしたいのです。そしてA,B,Cのデータが入っている日のセルにはそれぞれA,B,Cと表示させたいんです。
イメージ説明
ちなみに現在はモーダルウィンドウを開くとこまでできています。アドバイスや参考ソースの提示どうぞよろしくお願いします。 

 システム概要

システム名:アルバイト・パート用シフト表作成
まずこのシステムを使う立場は管理者・従業員の二つに分けられます
まずは会社側が管理者を作成しログイン→管理者のみ従業員を作成→シフト作成ページ(work_main.php)へ行くと作成された従業員を下にシフト作成していくシステムです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ok_rich

    2018/02/20 14:50

    具体的に説明しますと、管理者が別のページで時間区分(Aタイプ,Bタイプ,Cタイプ)を登録するのですがそれはDBテーブル(time_repertory)に格納されています。

    キャンセル

  • mts10806

    2018/02/20 14:54

    なるほど。回答しましたが、ちょっと修正します。

    キャンセル

  • ok_rich

    2018/02/20 14:56

    情報不足ですいません、更につきたしますと時間は(開始時間,終了時間,休憩)の三種類です。

    キャンセル

回答 1

checkベストアンサー

+3

ざっくりしか仕様把握していませんが、こんな感じではないでしょうか。
※ソースコードの提示は難しい内容なので、考え方のみです。

  1. [PHP]→[HTML]DBから時間区分を取得し、「勤務時間レパートリー」の入力コントロールをモーダルに設置する
  2. [javascript]→[HTML]クリックで登録モーダルを表示、日付・ユーザを引数として渡す
  3. [javascript]→[PHP]ajaxで日付、ユーザ(管理はIDとかでしょうか)、勤務時間レパートリーを送信。DBに登録する→jQueryのAjaxをPHPで使うやつ
  4. [PHP]→[javascript]→[php]→[HTML]更新成功したら画面リロード。シフト登録した日付のユーザには何かしらマークを置いておく
  5. [javascript]→[HTML]マークをクリックで登録時と同じモーダルを表示、日付・ユーザと共に「勤務時間レパートリー」も引数として渡す
    ※不安であればクリック時にajaxで情報を再取得しても良いです
  6. [javascript]→[HTML]渡された「勤務時間レパートリー」を初期状態チェックにしておく
  7. [javascript]→[PHP]「更新」ボタンとし、ajaxにて更新処理を行う(以下2.と同)

「チェック」とありますが、1個しか選択できないのであれば、ラジオボタンかセレクトボックスですよね?
初期値設定のやり方は下記を参考にしてください。

 ajax送信について

ajaxで送信するデータは配列形式です。

            var arg = {emp_id : $('#emp_id').val(),emp_name : $('#emp_name').val(),month : $('#month').val(),day : $('#day').val(),work_time:$("input[name='time_repertory']:checked").val()};

            $.ajax({
                type: "POST",
                url: "add.php",
                data: arg,
$_POST["emp_id"];

「OK」「NG」だけであれば、1,0だけをphp側で最後にecho して終わりです。
そこで出力された内容が dataに格納されます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/20 15:04

    わかりやすくアドバイス、リンクまで貼ってくださり誠にありがとうございます。
    今夜アドバイスを下に奮闘してまいります。
    またわからない事がありましたら宜しくお願いします。

    キャンセル

  • 2018/02/20 15:06

    ok_richさんがイメージしているものと齟齬があってはいけないので、
    もしやってみて違うようでしたらコメントください。

    キャンセル

  • 2018/02/20 15:08

    はい!ありがとうございます

    キャンセル

  • 2018/02/20 21:34

    こんばんわ、入力コントロールというものはテキストボックスのことでしょうか?

    キャンセル

  • 2018/02/20 22:11

    申し訳ございません、質問内容にだいぶミスがありました。
    質問を修正させて頂いたうえ、またアドバイスをよろしくお願いします。

    キャンセル

  • 2018/02/21 08:54

    >入力コントロール
    テキストボックス、テキストエリア、ラジオボタン、セレクトボックスなどinput,textarea全てです。

    キャンセル

  • 2018/02/21 08:56

    ですので、フローとしては私が回答に書いたフローと変わりはありません。

    キャンセル

  • 2018/02/21 14:16

    返答ありがとうございます。ただ今3のほうで詰まっております
    モーダルに時間区分を表示させたときに
    //<p><input type="radio" id="A" name="time_repertory" value="<?php echo $start_timeA,$end_timeA,$rest_timeA;?>">
    <?php echo "<label for=\"A\">A:開始:$start_timeA:終了:$end_timeA:休憩:$rest_timeA "?></p>//
    というふうにAの時間を表示させています、この場合valueに開始、終了、休憩の値を入れてるのですが
    登録ボタンをクリックしたときにどうやってチェックされた値の開始、終了、休憩時刻をPOSTメソッドで(start,end,rest)として定義することができるのでしょうか?

    最終的には従業員シフトデータテーブル(shift)
    にid(AI)|emp_id|emp_name|shift_id|shift_month|shift_day|start_time|end_time|rest_time|というカラムに登録したいのですが。

    キャンセル

  • 2018/02/21 14:20

    今現在のソースをjavascript部分も含めて質問本文に更新していただけますか?

    キャンセル

  • 2018/02/21 14:33

    文字数の関係で更新することができなかったので新しく質問として提示しました。
    https://teratail.com/questions/114476?modal=q-comp

    キャンセル

  • 2018/02/21 14:36

    続き、などであれば関連性があるこの質問のURLを貼っておくと良いです。
    タイトルがファイル名でソースコードだけある質問は他のユーザーには何がおきたか分からなくなりますので。

    キャンセル

  • 2018/02/21 14:40

    githubとかソースコードを共有できる場所にアップしたほうが良かったかもしれませんね・・・。

    キャンセル

  • 2018/02/21 14:42

    すいません、Githubにあげなおしたほうがよろしいでしょうか

    キャンセル

  • 2018/02/21 14:44

    そうですね。回答は書いてしまいましたが、もしできそうならあちら側の質問は削除依頼を出してください。

    キャンセル

  • 2018/02/21 15:30

    回答をこちらに転記しています。おそらくこれでPHP側に渡すのはうまくいくかと。

    キャンセル

  • 2018/02/21 15:36

    お手数かけてすいません
    ありがとうございます。
    ただ今学校なので帰宅して確認してみます

    キャンセル

  • 2018/02/21 23:59

    こんばんわお世話になっております。
    一応Git hubにソース上げておきました。https://github.com/okrich/test
    3のDBへ登録するときにwork_time:$("input[name='time_repertory']:checked").val()に開始終了休憩まとまって入ってるのですがこれを$start,$end,$restとして分散させてphpへpostすることはできるでしょうか?

    キャンセル

  • 2018/02/22 13:19

    github見れない環境なのでソース見れていませんが、
    time_repertoryテーブルに情報があるのでしたら、
    ラジオボタンtime_repertoryのvalをphpにajax送信し、
    そこからtime_repertoryテーブルにDBアクセスし、情報を取得しては?
    ラジオボタンtime_repertoryのvalにわざわざまとめる必要はないように思います。
    もっと言えばemp_shiftテーブルにもtime_repertoryテーブルのID?のみを登録しておき、joinして都度、開始終了休憩を取得すべきと思います。

    キャンセル

  • 2018/02/22 15:10

    申し訳ございません。納期(発表)が明日までとなっており時間が足りませんので、計画変更しセル(日にち)をクリック、モーダル表示、ラジオボックスで元々固定された時間をラベルで表示させチェックし追加(DB経由しない)するとモーダルを閉じ、閉じた瞬間にクリックしたセル番地に単なるA,B,Cを表示させる誤魔化しページを作ることにしたのですがセルクリックしたときの(A,B,C)を表示させるイベント処理がわからないです。アドバイスお願いします。

    キャンセル

  • 2018/02/22 15:19

    現時点の情報がこのコメントしかないので何ともいえません。(完全丸投げなのであればさすがに手に負いきれません)
    既に質問としては「解決済み」としているのもありますし、計画変更されたのであれば残酷かもしれませんが全く別要件です。別質問を立てられた方が良いかと思います。

    キャンセル

  • 2018/02/23 00:24

    確かにそうですね、この度は色々アドバイスしてくださってありがとうございました。
    色々と勉強になりました。

    キャンセル

同じタグがついた質問を見る

  • PHP

    23558questions

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

  • JavaScript

    19927questions

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

  • jQuery

    7996questions

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