JavaScript에서 테이블 행 숨기기
Anika Tabassum Era
2023년10월12일
-
jQuery의
toggle()함수를 사용하여 JavaScript에서 테이블 행 숨기기 -
jQuery의
show()및hide()함수를 사용하여 JavaScript에서 테이블 행 숨기기
JavaScript에서는 협력할 일부 기능이 있는 공통 class 아래에 특정 테이블 데이터를 정의할 수 있습니다. 이 특정 함수는 해당 테이블의 행이 선택적 트리거에서 어떻게 작동하는지 선언합니다.
쉽게 말해서 버튼이나 링크 태그는 테이블 행을 숨기고 표시하는 세부 정보가 있는 기능을 트리거합니다.
여기 예제에서는 jQuery의 toggle() 함수와 show() 및 hide() 함수에 중점을 둘 것입니다. 두 가지 방법 모두 행 확장 및 축소를 추론합니다.
코드 펜스에 뛰어들어 봅시다.
jQuery의 toggle() 함수를 사용하여 JavaScript에서 테이블 행 숨기기
이 예에서는 테이블 행을 가져와 display: "none"으로 설정합니다. 특정 anchor 태그를 클릭하면 현재 단계를 display: "block"으로 재정의합니다.
이 프로세스는 그 반대로 진행되므로 예상한 결과를 얻을 수 있습니다. 다음 코드 라인은 나머지를 보여줍니다.
코드 조각:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table>
<tr>
<td>Oranges</td>
<td>100</td>
<td><a href="#" class="toggler" data-prod-cat="1">+</a></td>
</tr>
<tr class="cat1" style="display:none">
<td></td>
<td>120</td>
</tr>
<tr class="cat1" style="display:none">
<td></td>
<td>140</td>
</tr>
<tr>
<td>Apples</td>
<td>100</td>
<td><a href="#" class="toggler" data-prod-cat="2">+</a></td>
</tr>
<tr class="cat2" style="display:none">
<td></td>
<td>120</td>
</tr>
<tr class="cat2" style="display:none">
<td></td>
<td>140</td>
</tr>
</table>
$(document).ready(function() {
$('.toggler').click(function(e) {
e.preventDefault();
$('.cat' + $(this).attr('data-prod-cat')).toggle();
});
});
출력:
-Function-to-Hide-Table-Rows.webp)
jQuery의 show() 및 hide() 함수를 사용하여 JavaScript에서 테이블 행 숨기기
두 개의 클릭 가능 항목이 있습니다. 하나는 테이블 행을 표시하기 위해 수행되고 다른 하나는 행을 축소합니다. 이전 예제에는 행을 표시하고 숨기는 작업을 수행하기 위해 하나의 클릭 가능 항목이 있었습니다.
그러나 동일한 작업을 수행하는 별도의 방법이 있습니다. 코드 블록을 확인해보자.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$(".cat1").hide();
});
$("#show").click(function(){
$(".cat1").show();
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Oranges</td>
<td>100</td>
</tr>
<tr class="cat1" style="display:none">
<td></td>
<td>120</td>
</tr>
<tr class="cat1" style="display:none">
<td></td>
<td>140</td>
</tr>
</table>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
출력:
-and-hide()-Function-to-Hide-Table-Rows.webp)
