以下が修正後のソースコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>時間チェック表</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
.total-time {
font-weight: bold;
}
#request-list {
margin-bottom: 50px;
}
</style>
</head>
<body>
<h1>タスクリスト</h1>
<!-- 作業場所、作業時間をコピーするボタン -->
<button type="button" onclick="copyCheckedTasks()">コピー</button>
<!-- ご要望リスト -->
<h2>ご要望リスト</h2>
<table>
<thead>
<tr>
<th>設定時間</th>
<th id="total-time">0</th>
</tr>
</thead>
<thead>
<tr>
<th>（参考）</th>
<th id="checked-tasks-total-time">0</th>
</tr>
</thead>
</table>
<button type="button" onclick="calculateTotalTime()">作業時間詳細修正・再計算</button>
<BR><BR>
<table id="checked-tasks">
<thead>
<tr>
<th>作業場所</th>
<th>作業時間（分）</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 元の表 -->
<h2>作業タスクリスト</h2>
<table>
<thead>
<tr>
<th>タスク名</th>
<th>必要時間（分）</th>
<th>完了</th>
</tr>
</thead>
<tbody id="task-list">
</tbody>
<tfoot>
<tr>
<td colspan="3" class="total-time">合計時間: <span id="total-time">0</span>分</td>
</tr>
</tfoot>
</table>
<script>
const tasks = [
['キッチン', 40],
['風呂', 40],
['トイレ', 10],
['洗面所', 15],
['リビング', 60],
['寝室', 30],
['ゲストルーム', 30],
['ゴミ捨て', 5],
['その他', 15],
];
const taskList = document.getElementById('task-list');
let totalTime = 0;
tasks.forEach(([name, time]) => {
const taskRow = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.textContent = name;
taskRow.appendChild(nameCell);
const timeCell = document.createElement('td');
const timeInput = document.createElement('input');
timeInput.type = 'number';
timeInput.value = time;
timeInput.addEventListener('change', () => {
time = Number(timeInput.value);
recalculateTotalTime();
});
timeCell.appendChild(timeInput);
taskRow.appendChild(timeCell);
const completeCell = document.createElement('td');
const completeCheck = document.createElement('input');
completeCheck.type = 'checkbox';
completeCheck.addEventListener('change', () => {
recalculateTotalTime();
updateCheckedTasks();
});
completeCell.appendChild(completeCheck);
taskRow.appendChild(completeCell);
taskList.appendChild(taskRow);
totalTime += time;
});
const totalCell = document.getElementById('total-time');
totalCell.textContent = totalTime;
const checkedTasksTotalCell = document.getElementById('checked-tasks-total-time');
checkedTasksTotalCell.textContent = 0;
function updateCheckedTasks() {
const checkedTasks = document.getElementById('checked-tasks');
const checkedList = checkedTasks.querySelector('tbody');
// すでに表示されている作業場所と作業時間の行をすべて削除する
while (checkedList.firstChild) {
checkedList.removeChild(checkedList.firstChild);
}
// 作業場所と作業時間を持つタスクの行を作成し、２つめの表に追加する
let checkedTasksTotalTime = 0;
const rows = taskList.querySelectorAll('tr');
for (let i = 0; i < rows.length; i++) {
const completeCheck = rows[i].querySelector('input[type="checkbox"]');
if (completeCheck.checked) {
const nameCell = rows[i].querySelector('td:first-child');
const timeCell = rows[i].querySelector('td:nth-child(2)');
const duration = Number(timeCell.querySelector('input').value);
checkedTasksTotalTime += duration;
}
}
checkedTasksTotalCell.textContent = checkedTasksTotalTime;
//再計算されたチェックされたタスクの合計時間を出力用textareaに記入
const checkedTasksCopy = document.createElement('textarea');
checkedTasksCopy.textContent = '選択場所リスト\n' + '合計時間は' + checkedTasksTotalCell.textContent + '分です。\n' + checkedTasks.innerHTML.substr(checkedTasks.innerHTML.indexOf('<tr>') + 14) + '\n';
document.body.appendChild(checkedTasksCopy);
checkedTasksCopy.select();
document.execCommand('copy');
document.body.removeChild(checkedTasksCopy);
}
function recalculateTotalTime() {
totalTime = 0;
const rows = taskList.querySelectorAll('tr');
for (let i = 0; i < rows.length; i++) {
const timeInput = rows[i].querySelector('input[type="number"]');
const completeCheck = rows[i].querySelector('input[type="checkbox"]');
const time = Number(timeInput.value);
totalTime += completeCheck.checked ? time : 0;
}
totalCell.textContent = totalTime;
}
function calculateTotalTime() {
updateCheckedTasks();
}
function copyCheckedTasks() {
alert('処理を開始します。しばらくお待ちください。');
}
</script>
</body>
</html>
修正点を説明します。
・関数updateCheckedTasks()の中で、再計算した結果をtextareaに記入するように変更しました。ここではtextContentを使って、checkedTasksCopyにフォーマットされた文字列を代入し、textareaを作成・選択・コピー・削除することで、textarea内の内容をクリップボードにコピーできるようにしています。
・関数calculateTotalTime()では、不要なalert()を削除しました。
・関数copyCheckedTasks()に関して、eval()やリダイレクトといったセキュリティ脆弱性を回避する対策として、alert()ではなくconsole.log()で処理を確認できるようにしました。また、ボタンをクリックしたら処理が終了するまで待つ必要があるため、alert()ではなく「処理を開始します。しばらくお待ちください。」という文言を表示するようにしました。修正後も、copyCheckedTasks()は処理内容によってはセキュリティ脆弱性が残るコードであることに注意してください。
