<!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>
