동적으로 테이블 열을 정렬하는 예제를 만들어보겠습니다. 이 예제는 HTML, CSS 및 JavaScript를 사용하여 동적으로 테이블을 정렬하는 방법을 보여줍니다.
1. HTML 코드 작성:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="euc-kr">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>동적 테이블 정렬</title>
</head>
<body>
<table id="sortable-table">
<thead>
<tr>
<th data-column="name">이름</th>
<th data-column="age">나이</th>
<th data-column="city">도시</th>
</tr>
</thead>
<tbody>
<tr>
<td data-type="name">John</td>
<td data-type="age">30</td>
<td data-type="city">New York</td>
</tr>
<tr>
<td data-type="name">Alice</td>
<td data-type="age">25</td>
<td data-type="city">Los Angeles</td>
</tr>
<tr>
<td data-type="name">Bob</td>
<td data-type="age">35</td>
<td data-type="city">Chicago</td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
위 코드에서는 정렬할 테이블과 테이블 헤더를 작성합니다.
2. CSS 코드 작성:
/* styles.css */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
cursor: pointer;
}
3. JavaScript 코드 작성:
// script.js
const table = document.getElementById("sortable-table");
const headers = table.querySelectorAll("th");
const rows = Array.from(table.querySelectorAll("tbody tr"));
function sortTable(columnIndex) {
const dataType = headers[columnIndex].getAttribute("data-column");
rows.sort((a, b) => {
const aValue = a.querySelector(`td[data-type="${dataType}"]`).textContent;
const bValue = b.querySelector(`td[data-type="${dataType}"]`).textContent;
if (dataType === "name") {
return aValue.localeCompare(bValue);
} else {
return Number(aValue) - Number(bValue);
}
});
rows.forEach((row) => table.tBodies[0].appendChild(row));
}
headers.forEach((header, index) => {
header.addEventListener("click", () => {
sortTable(index);
});
});
위 코드는 다음과 같은 작업을 수행합니다.
테이블 헤더를 클릭하면 해당 열을 기준으로 테이블을 정렬합니다.
이름 열은 문자열로, 나이 열은 숫자로 정렬됩니다.
이제 페이지를 열고 테이블의 열을 클릭하여 동적으로 정렬해보세요.
'HTML 예제' 카테고리의 다른 글
| 3D 회전 메뉴: CSS 3D 변환으로 메뉴 항목 회전 효과 (0) | 2023.12.06 |
|---|---|
| 트위터 피드 스타일링: 트위터 피드를 모바일 앱처럼 스타일링 (0) | 2023.12.06 |
| 깜빡이는 눈동자: CSS 애니메이션으로 눈동자 깜빡임 효과 (0) | 2023.12.06 |
| 텍스트 애니메이션: CSS로 텍스트가 글자 하나씩 나타나는 애니메이션 (0) | 2023.12.05 |
| 게임 미로: HTML과 JavaScript로 간단한 미로 게임 만들기 (0) | 2023.12.05 |
