旅行のパンフレットとかによくある料金表の原稿づくりとかも、FAXで手書きのものが送られてきたりする(らしい)。
そこを何とかフォーム入力でお願いしますという話がでて、原案として出したのがこんなもの。
jQueryのdatepickerじゃ上手くいかなそうだったので、tableで作ってみた。
手書きよりは、楽だと思うんだけど。
「続きを読む」で動きます。
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 |
<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 件のコメント:
コメントを投稿