- Today
- Total
Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- PROCEDURE
- 워드프레스
- function
- javascript
- 클론코딩
- 워스프레스
- sql
- 이클립스
- 함수
- 배열
- 오라클
- dbeaver
- 문제해결
- 프로시저
- Hostinger
- iframe
- 오류해결
- 트러블슈팅
- 자바스크립트
- spring boot
- PLSQL
- JSP
- 환경세팅
- Oracle
- pl/sql
- wordpress
- 엘리멘터
Archives
개발 공부중
[JavaScript] 테이블 특정 값에 해당하는 행 숨기는 버튼 만들기 본문
버튼을 누르면 테이블에 있는 특정값이 들어 있는 한 줄을 숨기는 코드를 작성했는데
value 값을 못 가져오는지 자꾸 전체가 숨겨지는 상황이 생겼다.
해결방법
1.
테이블의 각 행에 있는 'USE_YN' 엘리먼트의 값을 가져와서 arrValues 배열에 저장했다.
td에 들어가는 값의 id를 "USE_YN_1" , id="USE_YN_2" 로 다 다른 값을 줬다.
그래서 getElementById('USE_YN_' + i)로 'USE_YN'이라는 id를 가진 엘리먼트를 찾아와서
.value로 해당 엘리먼트의 값을 가져와서 반복문을 통해 모든 행에 대한 값을 배열에 저장했다.
2.
'제외' 인 상황과 '제외가 아닌' 상황 두 가지를 처리하기 위해 if - else 문을 사용했다.
<script>
function displayTable(){
var table = document.getElementById("myTable");
var rows = table.rows;
var arrValues = new Array;
// 1. 각 행의 USE_YN 엘리먼트의 값을 배열에 저장
for (var i = 1; i < rows.length; i++) {
var useYnElement = document.getElementById('USE_YN_' + i).value;
arrValues.push(useYnElement);
}
// 2. 배열에서 '제외'인 값이면 해당 행을 숨김
for (var i = 0; i < arrValues.length; i++) {
if (arrValues[i] === "제외") {
rows[i + 1].style.display = "none";
} else {
rows[i + 1].style.display = "";
}
}
}
</script>
아래는 예시
See the Pen Untitled by lee (@ttkbpxvt-the-vuer) on CodePen.
위 코드를 체크박스로 변경했다.
체크박스의 상태를 확인하고, 체크박스가 체크된 상태에서 '제외' 항목을 숨김으로 처리하도록 수정했다.
onchange 속성을 통해 체크박스 상태가 변경될 때 displayTable 함수를 부르게 했다.
See the Pen displayTable CheckBox by lee (@ttkbpxvt-the-vuer) on CodePen.
'JavaScript' 카테고리의 다른 글
[JavaScript] jQuery를 이용한 Ajax 통신 (0) | 2024.01.25 |
---|---|
[JavaScript] Uncaught TypeError : ~~ is not a function 오류 해결 (0) | 2023.11.13 |
[JavaScript] DataTable 간단한 예제 코드 (0) | 2023.11.09 |
[JavaScript] 함수(선언적 함수/익명 함수/대입형 함수/즉시실행 함수) (0) | 2023.02.16 |
[javaScript] 구조분해할당 (0) | 2023.02.15 |
Comments