Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
table {
border-collapse: collapse;
}
th, td {
width: 120px;
height: 60px;
border: 1px solid black;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習 時間割表を二次元配列で tableバージョン</title>
<script src="sugoi_timetable.js"></script>
<link href="sugoi_timetable.css" rel="stylesheet">
</head>
<body>
<h1>すごい時間割 Ver.2</h1>
<p>
<input type="button" value="時間割を見る" onclick="showTimetable();">
</p>
<p>
<table id="timetable"></table>
</p>
</body>
</html>
function showTimetable() {
var totalPeriod = 6; // 曜日ごとに6限まである(人によって5だったりする)
var timetable = [
[ // 月曜日
"",
"",
"空を飛ぶ(聴講)",
"",
"日本研究概論1",
""
],
[ // 火曜日
"",
"",
"",
"",
"",
"村井研Archミーティング"
],
[ // 水曜日
"",
"",
"",
"",
"",
""
],
[ // 木曜日
"",
"データ・ドリブン社会の創発と戦略(聴講)",
"インターネット(聴講)",
"村井・中澤合同研講義",
"村井・中澤合同研講義",
""
],
[ // 金曜日
"",
"都市システム論",
"インドネシア文化論",
"情報基礎2(SA)",
"情報基礎2(SA)",
""
],
];
var timetableElement = document.getElementById("timetable");
var tableHtml = "<tr><th></th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th></tr>";
for(var i = 0; i < totalPeriod; i++) {
var period = i + 1;
tableHtml += "<th>" + period + "</th>";
for(var j = 0; j < timetable.length; j++) { // timetable.length: 曜日列の数
tableHtml += "<td>" + timetable[j][i] + "</td>";
}
tableHtml += "</tr>";
}
timetableElement.innerHTML = tableHtml;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment