Jquery, Очистити / Очистити весь вміст елемента tbody?


77

Я думав, що це буде досить просто, але, схоже, порожній метод не працює, щоб очистити тіло, яке у мене є. Буду вдячний, якщо хтось знає правильний спосіб зробити це, я просто хочу видалити все, що міститься в тілі. Поки що я намагаюся:

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

HTML:

<table>
<tbody id="tbodyid">
<tr><td>something</td></tr>
</tbody>
</table>

ПРИМІТКА. Я намагаюся зробити це, щоб інтегрувати плагін, написаний кимось іншим, який я призначений використовувати для проекту. Я створюю нову <tr><td>new data</td></tr>сторону сервера і хочу мати можливість просто знищити існуючі рядки таблиці та замінити їх у зворотних викликах AJAX.


Ви пробували jsFiddle, який я щойно надав?
Марко

дякую за пораду, я спробую це за мить
Рік

Firefox ... що ви спробували? Я використовую Linux, тому в мене не встановлений IE, я гадаю, я міг би спробувати його в Chrome, але він все одно повинен працювати у всіх, щоб це працювало
Рік

Відповіді:


129

jQuery:

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

HTML:

<table>
    <tbody id="tbodyid">
        <tr>
            <td>something</td>
        </tr>
    </tbody>
</table>

Працює для мене
http://jsfiddle.net/mbsh3/


Я думаю, що chrome більш толерантний до деяких подібних речей, ніж може бути Firefox
Rick

Щось точно не так, коли ви додаєте theadелемент. Firefox 78.0.2 jsfiddle.net/geLxhwsu
jocull

Функція додавання помилково. Синтаксис полягає $('<tr>')у створенні нового елемента, а не $('tr') ! Silly me jsfiddle.net/efmyp3s0
jocull

53

Ви, мабуть, це вже з’ясували, але для когось, хто застряг у цій проблемі:

$("#tableId > tbody").html("");

10

Приклад для Видалення заголовка таблиці або тіла таблиці за допомогою jquery

function removeTableHeader(){
  $('#myTableId thead').empty();
}

function removeTableBody(){
    $('#myTableId tbody').empty();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTableId'  border="1">
  <thead>
    <th>1st heading</th>
    <th>2nd heading</th>
    <th>3rd heading</th>
  </thead>  
  <tbody>
    <tr>
      <td>1st content</td>
      <td>1st content</td>
      <td>1st content</td>
    </tr>
    <tr>
      <td>2nd content</td>
      <td>2nd content</td>
      <td>2nd content</td>
    </tr>
    <tr>
      <td>3rd content</td>
      <td>3rd content</td>
      <td>3rd content</td>
    </tr>
  </tbody>
</table>
<br/>
<form>
  <input type='button' value='Remove Table Header' onclick='removeTableHeader()'/>
  <input type='button' value='Remove Table Body' onclick='removeTableBody()'/>
</form>


1
$ ('# myTableId tbody'). empty (); це те, що я шукав там, де не хотів вставляти id для елемента tbody.
Div Tiwari

2
        <table id="table_id" class="table table-hover">
          <thead>
            <tr>
             ...
             ...
            </tr>
          </thead>
        </table>

використовуйте цю команду, щоб очистити тіло цієї таблиці: $("#table_id tbody").empty()

Я використовую jquery для динамічного завантаження вмісту таблиці і використовую цю команду, щоб очистити тіло під час оновлення.

сподіваюся, це допоможе вам.


1

Ви можете скористатися remove()функцією наведеного нижче прикладу і знову побудувати таблицю за допомогою голови та тіла таблиці

$("#table_id  thead").remove();
$("#table_id  tbody").remove();

0

Без використання ID ( <tbody id="tbodyid">) це чудовий спосіб вирішити цю проблему

$ ('# table1'). find ("tr: gt (0)"). remove ();

PS: Щоб видалити конкретний номер рядка, як наведено нижче

$ ('# table1 tr'). eq (1) .remove ();

або

$ ('# tr: nth-child (2)'). remove ();

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.