чітка таблиця jquery


103

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

Як я можу видалити всі рядки зі таблиці?

Відповіді:


162

Використовувати .remove ()

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

Якщо ви хочете зберегти дані для подальшого використання навіть після їх видалення, ви можете використовувати .detach ()

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

Якщо рядки є дітьми таблиці, тоді ви можете використовувати добірник замість селектора нащадків, наприклад

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

16
обережно з останнім: більшість браузерів додають неявний tbodyелемент навколо trелементів.
nickf

96

Якщо ви хочете очистити дані, але збережіть заголовки:

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

це працює, але це видаляє себе 'tbody' з усіма 'tr' всередині нього.
Hakan Fıstık

Ти маєш рацію, @HakamFostok. Я відредагував свою відповідь, щоб замість цього використовувати порожній ()
HoffZ

41

Трохи швидше, ніж видаляти кожен окремо:

$('#myTable').empty()

Технічно, це буде видалити thead, tfootі tbodyтеж елементи.


27

Мені це було потрібно:

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

Він видаляє всі рядки, крім заголовка.


12

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

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

Знищує все, що знаходиться всередині #yourtableid. Будьте обережні зі своїми селекторами, оскільки це знищить будь-який html у селекторі, який ви передаєте!


2
+1 для ядерних :). Але слід розуміти, що це не «найкращий» стиль :) Я б не рекомендував його взагалі
Будда

Лол. Домовились. Раніше я використовував цей конкретний метод для швидкості та вирішення складних ситуацій . Він має деяке використання у царині програм JQuery.
КевінДеус

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();


0

Маючи таку таблицю (із заголовком та тілом)

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

видаліть кожну tr, яка має батьківський ім'я tbody всередині #tableId

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

і навпаки, якщо ви хочете додати до свого столу

$('#tableId tbody').append("<tr><td></td>....</tr>");
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.