programing

일반 테이블 재쿼리

lastcode 2023. 8. 15. 11:09
반응형

일반 테이블 재쿼리

HTML 테이블을 여러 행으로 채웠습니다.

표에서 모든 행을 제거하려면 어떻게 해야 합니까?

.remove() 사용

$("#yourtableid tr").remove();

데이터를 제거한 후에도 나중에 사용할 수 있도록 보관하려면 .detach()를 사용하면 됩니다.

$("#yourtableid tr").detach();

행이 테이블의 자식인 경우 하위 선택기 대신 하위 선택기를 사용할 수 있습니다.

$("#yourtableid > tr").remove();

데이터를 지우지만 헤더는 유지하려는 경우:

$('#myTableId tbody').empty();

테이블의 형식은 다음과 같습니다.

<table id="myTableId">
    <thead>
        <tr>
            <th>header1</th><th>header2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td><td>data2</td>
        </tr>
    </tbody>
</table>

각각을 개별적으로 제거하는 것보다 약간 빠릅니다.

$('#myTable').empty()

기술적으로, 이것은 제거될 것입니다.thead,tfoot그리고.tbody요소들도.

이게 필요했어요.

$('#myTable tbody > tr').remove();

헤더를 제외한 모든 행이 삭제됩니다.

$("#employeeTable td").parent().remove();

모두 제거됩니다.tr하고 있다td헤더를 제외한 모든 행이 삭제됩니다.

핵 옵션:

$("#yourtableid").html("");

내부의 모든 것을 파괴합니다.#yourtableid선택기를 사용하면 통과한 선택기의 html이 모두 파괴됩니다!

이렇게 하면 본문에 속한 모든 행이 제거되어 머리글과 본문이 그대로 유지됩니다.

$("#tableLoanInfos tbody tr").remove();
<table id="myTable" class="table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody id="tblBody">

    </tbody>
</table>

및 제거:

$("#tblBody").empty();
  $('#myTable > tr').remove();

이와 같은 테이블(헤더와 본문 포함)을 갖는 것

<table id="myTableId">
    <thead>
    </thead>
    <tbody>
   </tbody>
</table>

#tableId 안에 tbody라는 부모가 있는 모든 tr 제거

$('#tableId tbody > tr').remove();

반대로 테이블에 추가하려면

$('#tableId tbody').append("<tr><td></td>....</tr>");

언급URL : https://stackoverflow.com/questions/2620181/clear-table-jquery

반응형