开发者

clear table jquery

开发者 https://www.devze.com 2022-12-26 17:53 出处:网络
I have an HTML t开发者_如何转开发able filled with a number of rows. How can I remove all the rows from the table?Use .remove()

I have an HTML t开发者_如何转开发able filled with a number of rows.

How can I remove all the rows from the table?


Use .remove()

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

If you want to keep the data for future use even after removing it then you can use .detach()

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

If the rows are children of the table then you can use child selector instead of descendant selector, like

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


If you want to clear the data but keep the headers:

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

The table must be formatted in this manner:

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


Slightly quicker than removing each one individually:

$('#myTable').empty()

Technically, this will remove thead, tfoot and tbody elements too.


I needed this:

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

It deletes all rows except the header.


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

This will remove all tr having td as child. i.e all rows except the header will be deleted.


The nuclear option:

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

Destroys everything inside of #yourtableid. Be careful with your selectors, as it will destroy any html in the selector you pass!


This will remove all of the rows belonging to the body, thus keeping the headers and body intact:

$("#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>

And Remove:

$("#tblBody").empty();


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


Having a table like this (with a header and a body)

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

remove every tr having a parent called tbody inside the #tableId

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

and in reverse if you want to add to your table

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

精彩评论

暂无评论...
验证码 换一张
取 消