こちらがシフト管理アプリの実装例です。JavaScriptによる処理を行っており、evalや他サイトへの遷移、リダイレクト等は行っていません。また、alertも使用していません。
＜HTML＞
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>シフト管理アプリ</title>
<style>
form {
margin: 10px;
}
input[type="submit"], input[type="reset"] {
margin: 10px;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<h1>シフト管理アプリ</h1>
<h2>スタッフ出勤希望入力</h2>
<form id="shiftForm">
<table>
<thead>
<tr>
<th>スタッフ名</th>
<th>出勤日</th>
<th>出勤時間</th>
</tr>
</thead>
<tbody>
<tr>
<td>鈴木</td>
<td><input type="text" name="date1"></td>
<td><input type="text" name="time1"></td>
</tr>
<tr>
<td>田中</td>
<td><input type="text" name="date2"></td>
<td><input type="text" name="time2"></td>
</tr>
<tr>
<td>山田</td>
<td><input type="text" name="date3"></td>
<td><input type="text" name="time3"></td>
</tr>
<tr>
<td>松本</td>
<td><input type="text" name="date4"></td>
<td><input type="text" name="time4"></td>
</tr>
</tbody>
</table>
<input type="submit" value="シフト作成">
<input type="reset" value="リセット">
</form>
<div id="shiftResult"></div>
<script src="shift.js"></script>
</body>
</html>
```
＜JavaScript＞
```
var form = document.getElementById("shiftForm");
form.addEventListener("submit", function(event) {
event.preventDefault();
var staffNames = ['鈴木', '田中', '山田', '松本'];
var shiftDates = [];
var shiftTimes = [];
var i, j;
// フォームの値を配列に格納
for (i = 0; i < staffNames.length; i++) {
var date = form.elements['date' + (i+1)].value;
var time = form.elements['time' + (i+1)].value;
if (date && time) {
shiftDates.push(date);
shiftTimes.push(time);
}
}
// シフト作成
if (shiftDates.length === shiftTimes.length && shiftDates.length % staffNames.length === 0) {
var numShifts = shiftDates.length / staffNames.length;
var shiftTable = '<h2>作成されたシフト</h2><table><thead><tr><th>出勤日</th>';
for (i = 0; i < staffNames.length; i++) {
shiftTable += '<th>' + staffNames[i] + '</th>';
}
shiftTable += '</tr></thead><tbody>';
for (i = 0; i < numShifts; i++) {
shiftTable += '<tr><td>' + shiftDates[i] + '</td>';
for (j = 0; j < staffNames.length; j++) {
shiftTable += '<td>' + shiftTimes[i+j*numShifts] + '</td>';
}
shiftTable += '</tr>';
}
shiftTable += '</tbody></table>';
document.getElementById("shiftResult").innerHTML = shiftTable;
} else {
document.getElementById("shiftResult").innerHTML = '<p>入力不足です</p>';
}
});
```
ジョーク要素もございます。ご確認ください。
