論文管理アプリ

<!DOCTYPE html>
<html>
<head>
	<title>論文管理アプリ</title>
</head>
<body>
	<h1>論文管理アプリ</h1>
	<table>
		<thead>
			<tr>
				<th>著者</th>
				<th>タイトル</th>
				<th>発行年</th>
				<th>論文アクセスURL</th>
				<th>未読・既読管理</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="text" id="author-input"></td>
				<td><input type="text" id="title-input"></td>
				<td><input type="text" id="year-input"></td>
				<td><input type="text" id="url-input"></td>
				<td><button onclick="manageReadStatus()">未読・既読管理</button></td>
			</tr>
		</tbody>
	</table>

	<script>
		const tableBody = document.querySelector('tbody');

		function manageReadStatus() {
			const author = document.querySelector('#author-input').value;
			const title = document.querySelector('#title-input').value;
			const year = document.querySelector('#year-input').value;
			const url = document.querySelector('#url-input').value;

			const row = document.createElement('tr');
			const authorData = document.createElement('td');
			const titleData = document.createElement('td');
			const yearData = document.createElement('td');
			const urlData = document.createElement('td');
			const statusData = document.createElement('td');
			const statusBtn = document.createElement('button');

			// 著者、タイトル、発行年、URLのデータをセット
			authorData.textContent = author;
			titleData.textContent = title;
			yearData.textContent = year;
			urlData.innerHTML = `<a href="${url}" target="_blank">${url}</a>`;

			// 未読・既読管理ボタンの設定
			statusBtn.textContent = '未読';
			statusBtn.onclick = function() {
				if (statusBtn.textContent === '未読') {
					statusBtn.textContent = '既読';
					row.style.backgroundColor = '#ddd';
				} else {
					statusBtn.textContent = '未読';
					row.style.backgroundColor = 'white';
				}
			};
			statusData.appendChild(statusBtn);

			// 行に各データ要素を追加
			row.appendChild(authorData);
			row.appendChild(titleData);
			row.appendChild(yearData);
			row.appendChild(urlData);
			row.appendChild(statusData);

			// テーブルに行を追加
			tableBody.appendChild(row);
		}
	</script>
</body>
</html>