Google Calenderのような担当者フォームをjQueryで実装する

顧客が説明した要件

  1. Google Calenderのような1週間分の担当者フォームの管理画面を作りたい
  2. 1週間の各曜日の担当者が誰なのかを動的に付け加えられるようにしたい
  3. フォームは画面遷移なしでAjaxで入力フォームを追加・削除できるようにしたい(1週間分をセットで)
  4. 項目は大科目と少科目がある
  5. 大科目は追加されることもあるし、削除されることもある
  6. データはCSVで保管したい

ということで、それらしく動くスクリプトをjQueryで頑張って作りました。顧客情報などを消してサンプルコードとして公開します。けっこう納期が厳しかったので、ソースは乱雑ですが、根性と気合いを入れて書けば何とか動くものですね。

jQuery読み込み

PHPとJavaScriptで動的フォームの追加・削除処理を定義

JavaScript部分

HTML部分

PHPを使って既存データセットでフォームを生成

HTMLフォーム送信部分

この記事をシェアする