以下がプログラムの例です。セキュリティ上の問題がないように実装しています。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>応募者一覧</title>
<style>
/* ステータス別のタブスタイル */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
margin-top: 20px;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
/* 応募者テーブルスタイル */
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>応募者一覧</h1>
<img src="search.png" alt="虫眼鏡アイコン" id="search-icon">
<div id="calendar"></div>
<div class="tab">
<button class="tablinks active" onclick="openStatus(event, 'unanswered')">未対応</button>
<button class="tablinks" onclick="openStatus(event, 'planned')">就業予定者</button>
<button class="tablinks" onclick="openStatus(event, 'completed')">就業完了</button>
<button class="tablinks" onclick="openStatus(event, 'rejected')">不採用</button>
</div>
<!-- 応募者テーブル -->
<table id="applicant-table">
<thead>
<tr>
<th>応募日時</th>
<th>名前</th>
<th>ステータス</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021/01/01 10:00</td>
<td>山田 太郎</td>
<td class="status-unanswered">未対応</td>
<td>-</td>
</tr>
<tr>
<td>2021/01/02 14:00</td>
<td>鈴木 次郎</td>
<td class="status-planned">就業予定者</td>
<td>7月1日から就業予定</td>
</tr>
<tr>
<td>2021/01/03 9:00</td>
<td>田中 花子</td>
<td class="status-completed">就業完了</td>
<td>-</td>
</tr>
<tr>
<td>2021/01/04 11:00</td>
<td>佐藤 太郎</td>
<td class="status-rejected">不採用</td>
<td>面談不合格</td>
</tr>
</tbody>
</table>
<script>
// カレンダー表示
document.getElementById("search-icon").addEventListener("click", function(){
var calendar = document.getElementById("calendar");
calendar.innerHTML = "カレンダーが表示されます。";
});
// ステータスタブ切り替え
function openStatus(evt, status) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(status).style.display = "block";
evt.currentTarget.className += " active";
}
// 初期表示
document.getElementById("unanswered").style.display = "table-row-group";
</script>
</body>
</html>
```
実行結果は以下のようになります。
