jquery는 tr을 표시하고 숨기도록 동적으로 설정합니다.

웹 페이지에 표시되는 많은 양의 데이터와 정보로 인해 스크롤 막대와 페이징은 더 이상 우리의 요구를 충족할 수 없습니다. 따라서 데이터를 표시하고 숨기는 더 나은 방법이 필요합니다. 이번 글에서는 jQuery를 이용하여 tr의 표시와 숨김을 동적으로 설정하고, 테이블에 데이터를 직접 표시하거나 숨기는 방법을 소개합니다.

1. 테이블 지우기

테이블을 동적으로 설정하는 과정에서는 테이블을 먼저 지우는 것이 가장 좋습니다. 테이블을 삭제하려면 다음 코드를 사용하세요.

$("#myTable tbody tr").remove();

그 중 #myTable은 조작하려는 테이블 ID, tbody는 테이블의 본문, tr은 테이블 행을 나타냅니다.

2. 모든 행 표시

테이블의 모든 행을 표시하려면 다음 코드를 사용하세요.

$("#myTable tbody tr").show();

이렇게 하면 테이블의 모든 행이 표시됩니다.

3. 모든 행 숨기기

테이블의 모든 행을 숨기려면 다음 코드를 사용할 수 있습니다.

$("#myTable tbody tr").hide();

이렇게 하면 모든 테이블 행이 숨겨집니다.

4. 조건에 따라 행 표시

다음 코드를 사용하여 조건에 따라 행을 표시합니다.

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).show();

그 중 조건은 필요에 따라 수정할 수 있습니다. 이 방법은 텍스트 콘텐츠, 클래스 또는 기타 속성과 같은 특정 기준을 기반으로 행을 표시할 수 있습니다.

5. 조건에 따라 행 숨기기

조건에 따라 행을 숨기려면 다음 코드를 사용하세요.

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).hide();

이렇게 하면 지정된 조건에 따라 행이 숨겨집니다.

6. 행 검색

다음 jQuery 코드를 사용하여 테이블 행을 검색하세요.

$("#myTable tbody tr").each(function () {
    var rowText = $(this).text().toLowerCase();
    $('input[type="text"]').keyup(function () {
        if ($(this).val().toLowerCase() === "" || rowText.indexOf($(this).val().toLowerCase()) !== -1) {
            $(this).closest("tr").show();
        } else {
            $(this).closest("tr").hide();
        }
    });
});

이 코드는 먼저 모든 테이블 행을 순회하고 입력 상자에 텍스트를 입력한 후 검색합니다. 텍스트 상자에 내용이 없으면 모든 행이 표시됩니다. 일치하는 항목이 있으면 일치하는 행만 표시되고, 그렇지 않으면 나머지 모든 행이 숨겨집니다.

7. 요약

jQuery를 사용하면 테이블 행의 표시 및 숨기기를 동적으로 설정하는 것이 매우 쉽습니다. 이 도움말에서는 표를 지우는 방법, 모든 행을 표시하거나 숨기는 방법, 조건에 따라 행을 표시하거나 숨기는 방법, 표의 행을 검색하는 방법에 대해 설명합니다. 이러한 기술을 사용하면 데이터를 더 잘 표시하고 사용자 경험을 향상시킬 수 있습니다.

위 내용은 jquery는 tr을 표시하고 숨기도록 동적으로 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!