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

104

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

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

обучение
источник

Ответы:

163

Используйте .remove ()

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

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

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

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

$("#yourtableid > tr").remove();
рахул
источник
16
осторожно с последним: большинство браузеров добавляют неявный tbodyэлемент вокруг trэлементов.
nickf
97

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

$('#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>
HoffZ
источник
это работает, но при этом удаляется само «tbody» со всеми «tr» внутри него.
Hakan Fıstık
Ты прав, @HakamFostok. Я отредактировал свой ответ, чтобы вместо этого использовать empty ()
HoffZ
41

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

$('#myTable').empty()

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

Nickf
источник
27

Мне это было нужно:

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

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

Наглый Q Bangwhistle
источник
12

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

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

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

Кевин Деус
источник
2
+1 за ядерное :). Но должен понимать, что это не лучший стиль :) Я бы не рекомендовал его в целом
Budda
ржунимагу. Согласовано. Раньше я использовал именно этот метод для ускорения и разрешения сложных ситуаций . Он имеет некоторое допустимое применение в сфере приложений JQuery.
KevinDeus
11
$("#employeeTable td").parent().remove();

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

Мринмой Сен
источник
Это единственный, который мне подходит. Удалить все, кроме заголовка ...
Эльберт Вильярреал
6

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

$("#tableLoanInfos tbody tr").remove();
Джеймс Кук
источник
1
<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();
Miragessee
источник
0

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

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

удалите каждый tr, имеющий родителя с именем tbody внутри #tableId

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

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

$('#tableId tbody').append("<tr><td></td>....</tr>");
Ичамказан
источник