JQuery удалить все строки таблицы, кроме первой

280

Используя jQuery, как мне удалить все строки в таблице, кроме первой? Это моя первая попытка использования селекторов индекса. Если я правильно понимаю примеры, должно работать следующее:

$(some table selector).remove("tr:gt(0)");

который я прочитал бы как «Обернуть некоторую таблицу в объект jQuery, а затем удалить все элементы« tr »(строки), где индекс элемента таких строк больше нуля». В действительности он выполняется без генерации ошибки, но не удаляет строки из таблицы.

Чего мне не хватает, и как мне это исправить? Конечно, я мог бы использовать прямой javascript, но мне так весело с jQuery, что я бы хотел решить эту проблему с помощью jQuery.

Кен Пол
источник
Кто-нибудь знает, почему данный код не работает? У меня также есть проблема при установке селектора фильтра в функцию удаления
Лето
1
Теперь, когда я понял это лучше, приведенный выше код не работает, потому что $ (некоторый селектор таблиц) выбирает только элемент таблицы, а не его дочерние элементы, поэтому для функции удаления нет элементов 'tr'. С помощью функции find выполняется поиск совпадений среди дочерних элементов элемента таблицы.
Кен Пол
Посмотрите на этот ответ stackoverflow.com/questions/4831334/…
AuthorProxy

Ответы:

522

Это должно работать:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});
Strelok
источник
2
Что если я хочу удалить строки таблицы, кроме first и secondde?
18
@ user594166 используйте gt (1) вместо gt (0).
christianvuerings
6
С веб-сайта jQuery: Because :gt() is a jQuery extension and not part of the CSS specification, queries using :gt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(index) instead. я бы рекомендовал использовать $ ("# mytable> tr"). Slice (1) .remove ();
Chris_F
ваш код не работает для меня .. я изменил gt (0) на gt (1), и это сработало.
августа
113

Я думаю, что это более читабельно, учитывая намерение:

$('someTableSelector').children( 'tr:not(:first)' ).remove();

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

Если у вас был элемент TBODY, вы можете сделать это:

$("someTableSelector > tbody:last").children().remove();

Если у вас есть элементы THEAD или TFOOT, вам нужно сделать что-то другое.

tvanfosson
источник
2
Re: сделать что-то другое .... это работает:$('someTableSelector > tbody:last > tr:not(:first)').remove();
Cheeso
чтобы удалить всех детей, мне пришлось использовать двойные кавычки. Не признал это иначе. $("#tasks").children().remove();
Doomsknight
40

Другой способ сделать это - использовать функцию empty () jQuery с элементами thead и tbody в вашей таблице.

Пример таблицы:

<table id="tableId">
<thead>
    <tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
    <tr><td>some</td><td>content</td></tr>
    <tr><td>to be</td><td>removed</td></tr>
</tbody>
</table>

И команда jQuery:

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

Это удалит все строки, содержащиеся в элементе tbody вашей таблицы, и сохранит элемент thead там, где должен быть ваш заголовок. Это может быть полезно, когда вы хотите обновить только содержимое таблицы.

jpmorin
источник
3
Это, вероятно, будет иметь наилучшую производительность среди всех предлагаемых решений, и это очень элегантно.
the.jxc 10.09.13
38

Если бы это был я, я бы свел его к одному селектору:

$('someTableSelector tr:not(:first)').remove();
Дейв Уорд
источник
Согласитесь, но более конкретно он должен сказать: $ ('someTableSelector tbody tr: not (: first)'). Remove ();
Марко Мусиньо
30

Ваш селектор не должен быть внутри вашего удаления.

Это должно выглядеть примерно так:

$("#tableID tr:gt(0)").remove();

Это означает, что выберите каждую строку, кроме первой в таблице с идентификатором tableID, и удалите их из DOM.

CMPalmer
источник
Я согласен. В моем случае объект таблицы был предварительно выбран.
Кен Пол
Удалить все строки, кроме первой: - $ ("# tableID tr: gt (1)"). Remove ();
Бики
9
$('#table tr').slice(1).remove();

Я помню, что натолкнулся на этот «срез» быстрее, чем все другие подходы, поэтому просто поместил его здесь.

Makubex
источник
У некоторых это не сработало. Принятый ответ, кажется, делает свое дело.
ankush981
gtне рекомендуется, это лучший ответ.
CyberEd
7

Рассмотрим таблицу с id tbl: код jQuery будет:

$('#tbl tr:not(:first)').remove();
Санкет Утекар
источник
3

Чтобы удалить все строки, кроме первой (кроме заголовка), используйте следующий код:

$("#dataTable tr:gt(1)").remove();

Бики
источник
1

Самый простой способ :

$("#mytable").find($("tr")).slice(1).remove()

-первая ссылка на таблицу
-получить список элементов и разрезать его и удалить выбранные элементы из списка

Pytholabs
источник
0

-Извините, это очень поздний ответ.

Я нашел самый простой способ удалить любую строку (и все остальные строки с помощью итерации):

$ ( '# RowId', '# TABLEID') удалить ().

Остальное легко.

Farjad
источник
0

обернутый в функцию:

function remove_rows(tablename) { 
    $(tablename).find("tr:gt(0)").remove();        
}

тогда назовите это:

remove_rows('#table1');
remove_rows('#table2');
PodTech.io
источник
0

Это работает отлично

$("#myTable tbody").children( 'tr:not(:first)' ).html("");
Infolet.org
источник
Да, это уже было опубликовано несколько раз раньше. Что-то новое?
Нико Хаазе
0

Это работает следующим образом в моем случае и работает нормально

$("#compositeTable").find("tr:gt(1)").remove();
saadk
источник