document.title = '時間割表メーカー 小中高から大人の生活リズムまで';

$(function(){

  times = ['',1,2,3,4,5,6,7];
  weekOrg = ['月','火','水','木','金','土','日'];
  week = [''].concat(weekOrg);
  week.pop();
  week.pop();
  
  subjectAry = [
    '自由',
    '国語',
    '算数',
    '理科',
    '社会',
    '英語',
    '体育',
    '保健',
    '水泳',
    '美術',
    '音楽',
    '技術',
    '工芸',
    '生活',
    '家庭',
    '道徳',
    '自習',
    '宿題',
    '特別',
    '給食',
    '部活',
    '帰宅',
    '塾',
    '手伝い',
    '遊び',
    '休み',
    '選択',
    '古文',
    '漢文',
    '現代文',
    '仏語',
    '独語',
    '書道',
    '数学',
    '数学I',
    '数学II',
    '数学III',
    '数学A',
    '数学B',
    '物理',
    '化学',
    '生物',
    '情報',
    '電気',
    '電子',
    '地学',
    '歴史',
    '日本史',
    '世界史',
    '地理',
    '公民',
    '政治',
    '経済',
    '倫理',
    '宗教',
    '文化',
    '英語表現',
    '英語会話',
    '英コミュ',
    '農業',
    '工業',
    '商業',
    '看護',
    '福祉',
    '準備',
    '運動',
    '睡眠',
    '洗濯',
    '風呂',
    '料理',
    '掃除',
    '買物',
    '会議',
    '移動',
    '送迎',
    '食事',
    '読書',
    '休憩',
    '仕事',
  ];
  var subject = subjectAry[0];

  $table = $('<table>',{id:'target'});
  var setTable = function(){
    $table.empty();
    times.forEach(function(v, i){
      var $tr = $('<tr>');
      $table.append($tr);
      week.forEach(function(vv, j){
        var $td = $('<td>');
        $tr.append($td);

        if(i===0){
          $td.text(vv);
        }
        if(j===0){
          $td.text(v);
          return;
        }
        $td.on('click',function(){
          var text = $(this).text();
          var subjectText = subject;
          if(text === subjectText){
            return;
          }
          $(this).empty();
          var b = $('<b>',{contentEditable:'true'}).text(subjectText);
          $(this).append(b);
        });

      });
    });
  }

  $('#demo').append($table);
  setTable();

  $form = $('<form>');
  $('#demo').append($form);
  subjectAry.forEach(function(v, i){
    var $label = $('<label>');
    var $input = $('<input>',{name:'subject',type:'radio'}).val(v);
    var $i = $('<i>').text(v);
    
    $label.append($input).append($i);
    $form.append($label);
    $label.on('click',function(){
      $('label').removeClass('select');
      $(this).addClass('select');
      subject = $input.val();
    });
  });

  $inputTimeLabel = $('<label>').text('時間');
  $inputTime = $('<input>',{type:'number',min:1,max:29}).val(times.length);
  $inputTime.on('change', function(){
    var n = Number($(this).val());
    var ary = [...Array(n)].map((_, i) => i+1);
    times = [''].concat(ary);
    setTable();
  });
  $inputWeekLabel = $('<label>').text('曜日');
  $inputWeek = $('<input>',{type:'number',min:1,max:7}).val(week.length);
  $inputWeek.on('change', function(){
    var n = Number($(this).val());
    var ary = [''];
    for(i=0;i<n;i++){
      ary.push(weekOrg[i]);
    }
    week = ary;
    setTable();
  });
  $inputTimeLabel.append($inputTime);
  $inputWeekLabel.append($inputWeek);
  $('#demo').append($inputTimeLabel);
  $('#demo').append($inputWeekLabel);
  


  $screenshot = $('<div>',{id:'screenshot'});
  $btn = $('<button>').text('時間割表を画像に変換 (印刷用)');
  $p = $('<p>').text('タップ操作でカンタン時間割表を作成！小学校から中学・高校の教科、社会人までOK！24時間区分に変更可能！オリジナルの時間割表をカスタムしてつくろう！つくった時間割表は画像にしてダウンロードできるよ');
  $('#demo').append($p).append($btn).append($screenshot);

  var lib =$('<script>',{src:'/js/lib/html2canvas.js'});
  $('body').append(lib);
  
  $btn.on('click',function(){
    $screenshot.empty();
    html2canvas(document.querySelector("#target")).then(canvas => {
      document.querySelector("#screenshot").appendChild(canvas)
    });
  });
  
});

table{
  width:100%;
  height:100vh;
}
td{
  width:100%;
}
td{
  border:1px solid #000;
  text-align:center;
  vertical-align:middle;
  font-size:32px;
  width:12%;
  table-layout:fixed;
}
td:hover{
  background-color:rgba(0,0,0,0.1);
}
td:nth-child(1){
  width:10%;
}

label{
  display:inline-block;
  width:120px;
  height:48px;
  line-height:48px;
}
label:hover{
  background-color:rgba(0,0,0,0.1);
}

label.select{
  background-color:rgba(255,0,0,0.1);
}

canvas{
  max-width:100%;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-school-timetable/