Translate

2016年9月24日土曜日

【jQuery】【javascript】料金表カレンダーを楽に入力できるフォーム(案)

世の中にはまだまだアナログ作業が残っているようで、
旅行のパンフレットとかによくある料金表の原稿づくりとかも、FAXで手書きのものが送られてきたりする(らしい)。
そこを何とかフォーム入力でお願いしますという話がでて、原案として出したのがこんなもの。
jQueryのdatepickerじゃ上手くいかなそうだったので、tableで作ってみた。
手書きよりは、楽だと思うんだけど。
「続きを読む」で動きます。

1234567
891011121314
15161718192021
22232425262728
293031
1234
567891011
12131415161718
19202122232425
262728



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
   $(function(){
      plan =["","S","A","B","C","D","E","F","×"];
      var selector = '<br /><select name ="plan">';
      for(var n=0;n<plan.length;n++)
      {
         selector += '<option value ="' + plan[n] + '">'+ plan[n] + '</option>';
      }
      selector +="</select>";
      $(".callendar td").each(function()
      {
         if($(this).text())
         {
            $(this).append(selector);
         }
      })

      $(".callendar").on("change" , function()
      {
         check_callendar($(this).attr("id"));
      })

      function check_callendar(target)
      {
         var day_count =1;
         var tmp_plan ="";
         var start_num ;
         $("#" + target +" td").each(function()
         {
            if($(this).text())
            {
               if(day_count ==1)
               {
                  tmp_plan = $(this).children('select').val();
                  start_num = day_count;
               }else {
                  this_plan = $(this).children('select').val();
                  if( this_plan !="" )
                  {

                     fill_plan(start_num , day_count-1 , tmp_plan, target);
                     tmp_plan = $(this).children('select').val();
                     start_num = day_count;
                  }
               }
               day_count ++ ;
            }
         })
      }
      function fill_plan(start , end , base_plan ,target)
      {
         var change_day_count =1;
         $("#" + target +" td").each(function()
         {
            if($(this).text() && change_day_count <= end && change_day_count >= start)
            {
               $(this).children('select').val(base_plan);
            }

            if(change_day_count > end)
            {
               return ;
            }
            if($(this).text())
            {
               change_day_count++;
            }
         })
      }
   })
</script>


0 件のコメント:

コメントを投稿