如何使用 Javascript 在時間表中顯示 JSON 數據
[英]How to display JSON data in a timetable using Javascript
問題描述
我最近剛剛開始學習 Javascript，我目前正面臨這個問題。 我有一個包含 JSON 數據的文件和一個單獨的 Html 時間表設計文件。 我想使用 Javascript 使用 JSON 數據填充時間表，以便所有健身 class 數據（位置、時間、健身代碼、組 ID）正確顯示在時間設置中。
我該怎么做？
下面是我的 JSON 和 html 文件
// example data var timetable = { "for": "A Student", "srn": "12345678", "cohort": "PE/GYM/PUG9", "fitnessClasses": { "pug101lbs": { "name": "Let's be Strong" }, "pug101lbf": { "name": "Let's Focus" } }, "schedule": [ { "fitnessClass": "pug101lbs", "sessionType": "Power Pump", "duration": 1, "allocatedTime": { "group": "A", "day": "mon", "location": "Studio1", "time": "11" }, "alternativeTimes": [{ "group": "B", "day": "tues", "location": "Studio2", "time": "11" }] } ] }
table, th, td { padding: 5px; border: 1px solid black; } table { border-collapse: collapse; border-spacing: 0px; } td { width: 60px; } th, .dayRowHead { background-color: purple; color: white; } th.dayRowHead { text-align: left; background-color: white; color: white; } /* optional shading for out of normal hours slots */ #weds.s14, #weds.s15, #weds.s16, #weds.s17 { background-color: lightgrey; }.s17 { background-color: lightgrey; }
<head> <title>Blank Timetable</title> </head> <body> <table> <thead> <tr> <th class="dayRowHead">Day</th> <th>9:00</th> <th>10:00</th> <th>11:00</th> <th>12:00</th> <th>13:00</th> <th>14:00</th> <th>15:00</th> <th>16:00</th> <th>17:00</th> <th>18:00</th> <th>19:00</th> <th>20:00</th> </tr> </thead> <tbody> <tr id="mon"> <td class="dayRowHead">Mon</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> <tr id="tues"> <td class="dayRowHead">Tues</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> <tr id="weds"> <td class="dayRowHead">Wednesday</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> <tr id="thurs"> <td class="dayRowHead">Thursday</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> <tr id="fri"> <td class="dayRowHead">Friday</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> </tbody> </table> </body>
1 個解決方案
解決方案1
0 2019-11-07 10:23:29
像這樣
// example data var timetable = { "for": "A Student", "srn": "12345678", "cohort": "PE/GYM/PUG9", "fitnessClasses": { "pug101lbs": { "name": "Let's be Strong" }, "pug101lbf": { "name": "Let's Focus" } }, "schedule": [ { "fitnessClass": "pug101lbs", "sessionType": "Power Pump", "duration": 1, "allocatedTime": { "group": "A", "day": "mon", "location": "Studio1", "time": "11" }, "alternativeTimes": [{ "group": "B", "day": "tues", "location": "Studio2", "time": "11" }] } ] } window.addEventListener("load", () => { timetable.schedule.forEach(item => { let day = item.allocatedTime.day; let time = item.allocatedTime.time; let loc = item.allocatedTime.location; let sessionType = item.sessionType; document.getElementById(day).querySelector(".s" + time).innerHTML = `${loc}<br/>${sessionType}`; const alts = item.alternativeTimes; alts.forEach(alt => { document.getElementById(alt.day).querySelector(".s" + alt.time).innerHTML = `${alt.location}<br/>${sessionType}`; }); }) })
table, th, td { padding: 5px; border: 1px solid black; } table { border-collapse: collapse; border-spacing: 0px; } td { width: 60px; } th, .dayRowHead { background-color: purple; color: white; } th.dayRowHead { text-align: left; background-color: white; color: white; } /* optional shading for out of normal hours slots */ #weds.s14, #weds.s15, #weds.s16, #weds.s17 { background-color: lightgrey; }.s17 { background-color: lightgrey; }
<head> <title>Blank Timetable</title> </head> <body> <table> <thead> <tr> <th class="dayRowHead">Day</th> <th>9:00</th> <th>10:00</th> <th>11:00</th> <th>12:00</th> <th>13:00</th> <th>14:00</th> <th>15:00</th> <th>16:00</th> <th>17:00</th> <th>18:00</th> <th>19:00</th> <th>20:00</th> </tr> </thead> <tbody> <tr id="mon"> <td class="dayRowHead">Mon</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> <tr id="tues"> <td class="dayRowHead">Tues</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> <tr id="weds"> <td class="dayRowHead">Wednesday</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> <tr id="thurs"> <td class="dayRowHead">Thursday</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> <tr id="fri"> <td class="dayRowHead">Friday</td> <td class="s9"></td> <td class="s10"></td> <td class="s11"></td> <td class="s12"></td> <td class="s13"></td> <td class="s14"></td> <td class="s15"></td> <td class="s16"></td> <td class="s17"></td> <td class="s18"></td> <td class="s19"></td> <td class="s20"></td> </tr> </tbody> </table> </body>
將JSON數據轉換為時間表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.