[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.