очистить таблицу JQuery - PullRequest
       16

очистить таблицу JQuery

90 голосов
/ 12 апреля 2010

У меня есть HTML-таблица , заполненная количеством строк.

Как мне удалить все строки таблицы?

Ответы [ 10 ]

146 голосов
/ 12 апреля 2010

Использование .remove ()

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

Если вы хотите сохранить данные для будущего использования даже после их удаления, вы можете использовать .detach ()

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

Если строки являются дочерними по отношению к таблице, то вместо селектора-потомка можно использовать дочерний селектор, например

$("#yourtableid > tr").remove();
80 голосов
/ 12 октября 2011

Если вы хотите очистить данные, но сохранить заголовки:

$('#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>
39 голосов
/ 12 апреля 2010

Чуть быстрее, чем удаление каждого из них по отдельности:

$('#myTable').empty()

Технически это удалит также элементы thead, tfoot и tbody.

27 голосов
/ 13 марта 2012

Мне нужно это:

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

Удаляет все строки, кроме заголовка.

11 голосов
/ 13 сентября 2013
$("#employeeTable td").parent().remove();

Это удалит все tr с td дочерним. все строки, кроме заголовка, будут удалены.

10 голосов
/ 11 августа 2012

Ядерный вариант:

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

Уничтожает все внутри #yourtableid. Будьте осторожны с вашими селекторами, так как он уничтожит любой html в селекторе, который вы передадите!

3 голосов
/ 18 сентября 2017

Это удалит все строки, принадлежащие телу, сохраняя заголовки и тело без изменений:

$ ("# tableLoanInfos tbody tr"). Remove ();

0 голосов
/ 01 июля 2017
<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();
0 голосов
/ 23 мая 2017

Имея такую ​​таблицу (с заголовком и телом)

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

удаляет каждого tr, у которого есть родительский элемент tbody внутри # tableId

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

и наоборот, если вы хотите добавить в таблицу

$('#tableId tbody').append("<tr><td></td>....</tr>");
0 голосов
/ 11 октября 2013
  $('#myTable > tr').remove();
...