<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>分类</th>
<th>作者</th>
<th>书名</th>
<th>评级</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>科幻</td>
<td>作者1</td>
<td>书名1</td>
<td>4星</td>
</tr>
<tr>
<td>2</td>
<td>历史</td>
<td>作者2</td>
<td>书名2</td>
<td>3星</td>
</tr>
<tr>
<td>3</td>
<td>悬疑</td>
<td>作者3</td>
<td>书名3</td>
<td>5星</td>
</tr>
<tr>
<td>4</td>
<td>文学</td>
<td>作者4</td>
<td>书名4</td>
<td>4星</td>
</tr>
<tr>
<td>5</td>
<td>科幻</td>
<td>作者4</td>
<td>书名4</td>
<td>4星</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
document.addEventListener("DOMContentLoaded", function () {
const table = document.querySelector('table');
const thElements = document.querySelectorAll('th');
thElements.forEach(th => {
th.addEventListener('click', function () {
sortTable(this.cellIndex);
});
});
function sortTable(columnIndex) {
const tbody = table.querySelector('tbody');
const rows = Array.from(tbody.rows);
rows.sort((a, b) => {
const aText = a.cells[columnIndex].textContent.trim();
const bText = b.cells[columnIndex].textContent.trim();
return aText.localeCompare(bText);
});
const fragment = document.createDocumentFragment();
rows.forEach(row => fragment.appendChild(row));
tbody.innerHTML = '';
tbody.appendChild(fragment);
setTimeout(() => {
requestAnimationFrame(() => {
rows.forEach(row => Array.from(row.cells).forEach(cell => cell.style.transform = ''));
});
}, 10);
}
});
</script>
