Q&A
前提・実現したいこと
プルダウンで年月を選択→対応した日付と曜日の項目の表を表示したいです。
ご存じの方がいらっしゃいましたらお教えいただけると助かります。
発生している問題・エラーメッセージ
コンソールを見ても、特にエラーが出ているわけではなさそうなのですが、表の部分が表示されません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <script 5 src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 6 integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" 7 crossorigin="anonymous"></script> 8 <meta charset="utf-8"> 9 <link rel="stylesheet" href="css/itiran.css"> 10 11 <title>勤怠管理システム</title> 12 </head> 13 14 <body> 15 <div class="honbun"> 16 <div class="top"> 17 <h1>勤怠一覧</h1> 18 </div> 19 <div class="select"> 20 21 <select class="cl_year" id="id_year"> 22 </select> 23 <a href="#" class="moji"> 24 年 25 </a> 26 <select class="cl_month" id="id_month" name="name_month"> 27 </select> 28 <a href="#" class="moji"> 29 月 30 </a> 31 32 <a href="#" class="hyoji">表示</a> 33 34 <table class="tableAll"> 35 <tr> 36 <th>実労働時間(h)</th> 37 <td>h</td> 38 <th>残業時間(h)</th> 39 <td>h</td> 40 <th>休憩時間(h)</th> 41 <td>h</td> 42 </tr> 43 </table> 44 </a> 45 46 <a href="#" class="logout">ログアウト</a> 47 </div> 48 49 <table> 50 <div id="calendar"></div> 51 </table> 52 53 <script type="text/javascript" src="itiran.tamesi.js"></script> 54 </body> 55 </html>
JavaScript
1$(function() { 2 var date = new Date(); 3 var year = date.getFullYear(); 4 var weekday = [ "日", "月", "火", "水", "木", "金", "土" ]; 5 6 // 選択された年月日を取得 7 var selected_year = document.getElementById("id_year"); 8 var selected_month = document.getElementById("id_month"); 9 let selected_dayCount = 1; // 日にちのカウント 10 let calendarHtml = ''; // HTMLを組み立てる変数 11 12 // プルダウン 13 $(function() { 14 /*ループ処理*/ 15 optionLoop = function(start, end, id) { 16 var i, opt; 17 opt = null; 18 for (i = end; i >= start ; i--) { 19 if (i === date) { 20 opt += "<option value='" + i + "' selected>" + i + "</option>"; 21 } else { 22 opt += "<option value='" + i + "'>" + i + "</option>"; 23 } 24 } 25 return document.getElementById(id).innerHTML = opt; 26 }; 27 28 /*関数設定*/ 29 optionLoop(1990, year, 'id_year'); 30 optionLoop(1, 12, 'id_month'); 31 }); 32 33 34 // カレンダー 35 calendarHtml += '<table>'; 36 37 // 見出し 38 calendarHtml += '<tr>'+'<th>'+"日"+'</th>' 39 +'<th>'+"曜日"+'</th>' 40 +'<th>'+"開始"+'</th>' 41 +'<th>'+"終了"+'</th>' 42 +'<th>'+"休憩(h)"+'</th>' 43 +'<th>'+"勤務時間(h)"+'</th>' 44 +'<th>'+"出欠"+'</th>' 45 +'</tr>'; 46 47 // 日付 48 $('#id_year,#id_month').change(function() { 49 50 selected_year = $('#id_year').val(); 51 selected_month = $('#id_month').val(); 52 53 //選択月初日 54 var selected_startDate = new Date( selected_year, selected_month - 1, 1); 55 //月の最後の日 56 var selected_endDate = new Date(selected_year, selected_month, 0); 57 // 月の末日 58 var selected_endDayCount = selected_endDate.getDate(); 59 // 月の最初の日の曜日を取得 60 var selected_startDay = selected_startDate.getDay(); 61 let selected_weekCount = selected_startDay; // 曜日のカウント 62 63 for (let i = 0; i < selected_endDayCount; ++i) { 64 // 日付の生成 65 calendarHtml += '<tr>'+ '<td>' + selected_dayCount + '</td>'; 66 selected_dayCount++; 67 // 曜日の生成 68 calendarHtml += '<td>' + weekday[selected_weekCount] + '</td>'+ '</tr>'; 69 if(selected_weekCount >= 6) { 70 selected_weekCount = 0; 71 } else { 72 selected_weekCount++; 73 } 74 } 75 }) 76 calendarHtml += '</table>'; 77 document.querySelector('#calendar').innerHTML = calendarHtml; 78}); 79
補足情報（FW/ツールのバージョンなど）
何か情報が不足していましたらご指摘いただけると助かります。
どうぞよろしくお願いいたします。
回答1件
0
ベストアンサー
最後のところ
}) calendarHtml += '</table>'; document.querySelector('#calendar').innerHTML = calendarHtml;
ではなく
calendarHtml += '</table>'; document.querySelector('#calendar').innerHTML = calendarHtml; })
ではないですかね。
こういうミスをしないためにもインデントを整えるのは大事です。
投稿2021/06/16 08:32
総合スコア8402
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/16 08:45
2021/06/16 08:53
2021/06/16 09:09