2024. 10. 11. 17:51ㆍJavaScript
hidden을 활용하여 다중 필터 기능을 구현해볼 것이다.
배열에 사용할 수 있는 함수
| 함수 | 기능 |
| arr.forEach | 단순 반복 |
| arr.filter | 조건 필터 |
| arr.toSorted | 정렬 |
| arr.map | 재구성 |
| arr.slice | 잘라내기 |
| arr.includes | 포함여부 확인 |
다중필터
boxList 는 check box의 내용을 모두 불러온것 (querySelect 로 불러온건 모두 nodeList)
-> const boxList = document.querySelectorAll('div.left > label > input[type="checkbox"]')
배열에서 원하는 속성만 가져오거나, 별도의 속성을 추가해서 가져올때 Array.map 사용
map 을 이용하여 name 속성에 있는 데이터에서 a 를 지우고(replace) 정수(+)만 남긴다
-> const checkedArray = Array.from(boxList).filter(e => e.checked).map(e => +e.name.replace('a', ''))
반복문을 이용하여, 소수점 아래 지움(floor)
-> const age = Math.floor(+tr.children[1].innerText / 10) * 10
체크박스에 체크가 되어있는 목록에서 해당 나이가 있다면
-> if(checkedArray.includes(age)) {
hidden 목록에서 제거
-> tr.classList.remove('hidden') }
아니라면, hidden 에 추가
-> else { tr.classList.add('hidden') }
체크박스를 클릭하면 filterHandler 실행
-> boxList.forEach(box => box.onclick = filterHandler
<style>
#root {
display: flex;
width: 500px;
height: 350px;
}
.left {
display: flex;
flex-direction: column;
width: 100px;
}
.left > label {
flex: 1
}
table {
border-collapse: collapse;
border: 2px solid black;
}
td {
border: 1px solid grey;
padding: 10px 20px;
}
tr.hidden {
display: none;
}
</style>
</head>
<body>
<h1>다중조건필터</h1>
<hr>
<div id="root">
<div class="left">
<label><input type="checkbox" name="a10">10대</label>
<label><input type="checkbox" name="a20">20대</label>
<label><input type="checkbox" name="a30">30대</label>
<label><input type="checkbox" name="a40">40대</label>
<label><input type="checkbox" name="a50">50대</label>
</div>
<div class="right">
<table>
<tr>
<td>남도일</td>
<td>17</td>
</tr>
<tr>
<td>카리나</td>
<td>25</td>
</tr>
<tr>
<td>이지은</td>
<td>31</td>
</tr>
<tr>
<td>홍진호</td>
<td>42</td>
</tr>
<tr>
<td>유재석</td>
<td>51</td>
</tr>
<tr>
<td>천우희</td>
<td>37</td>
</tr>
<tr>
<td>윈터</td>
<td>23</td>
</tr>
<tr>
<td>나루토</td>
<td>16</td>
</tr>
</table>
</div>
</div>
<!-- 다중 필터 -->
<script>
const boxList = document.querySelectorAll('div.left > label > input[type="checkbox"]') // NodeList
function filterHandler(event) {
const checkedArray = Array.from(boxList).filter(e => e.checked).map(e => +e.name.replace('a', ''))
console.log(checkedArray)
const trList = document.querySelectorAll('table > tbody > tr')
trList.forEach(tr => {
const age = Math.floor(+tr.children[1].innerText / 10) * 10
if(checkedArray.includes(age)) {
tr.classList.remove('hidden')
}
else {
tr.classList.add('hidden')
}
})
}
boxList.forEach(box => box.onclick = filterHandler)
</script>
</body>
</html>
클릭이벤트의 대상만 처리 한다면
<script>
const boxList = document.querySelectorAll('div.left > label > input[type="checkbox"]')
function filterHandler(event) {
// 배열에서 원하는 속성만 가져오거나
// 별도의 속성을 추가해서 가져올때 Array.map 사용
const checkedArray = Array.from(boxList).map(e => {
const ob = {
age : +e.name.replace('a', ''),
checked : e.checked
}
return ob
})
console.log(checkedArray)
// 만약, 다중조건이 아니라 클릭이벤트의 대상만 처리한다면
const flag = +event.target.name.replace('a', '')
const trList = document.querySelectorAll('table > tbody > tr')
trList.forEach(tr => {
const value = +tr.children[1].innerText
if(flag <= value && value < flag + 10 ) {
tr.classList.remove('hidden')
}
else {
tr.classList.add('hidden')
}
})
}
boxList.forEach(box => box.onclick = filterHandler)
</script>hidden 속성을 추가, 삭제하여 해당하지 않는 데이터는 사용자에게 보여지지 않게
흔히 말하는 필터 기능을 구현하니 또 색달랐다.
같은 필터 기능이더라도 어떤식으로 접근 하느냐에 따라 많은 방법들이 존재하는 것 같다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] AJAX (0) | 2024.10.10 |
|---|---|
| [JavaScript] json 화면 구현 (0) | 2024.10.10 |
| [JavaScript] Search Filter (0) | 2024.10.10 |
| [JavaScript] ClickEvent (0) | 2024.10.10 |
| [JavaScript] 정렬 (7) | 2024.10.09 |