Как удалить все <tr>из таблицы, кроме первой, используя jquery

Question

У меня есть таблица, и я хочу удалить все <tr> таблицы, кроме первой.Как я могу это сделать .?

Answer 1

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

Если это так, один простой вариант - поместить первую строку в <thead>, а все строки тела в <tbody>. Тогда вы можете просто сделать:

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

Это также придает вашему HTML более семантическое значение.

Answer 2

Здесь есть несколько способов, наиболее кратким является использование селектора :gt(), например:

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

Answer 3

Полагаю, я вскочу на подножку и предложу несколько решений:

Если вы используете thead для первого ряда, просто опустите tr s в tbody:

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

Если вы не используете thead, вы можете получить последующие строки различными способами. Я настоятельно рекомендую просмотреть jQuery API

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

1. $('#myTable tr + tr').remove();
2. $('#myTable tr:gt(0)').remove();
3. $('#myTable tr:not(:first-child)').remove();
4. $('#myTable').find('tr').not(':first-child').remove();
5. $('#myTable tr:first-child').siblings().remove();

На самом деле все сводится к тому, насколько креативно вы хотите быть в своих селекторах и каковы ваши намерения. Я не предоставил пример фильтра, но использование filter позволит вам вызвать end и продолжить цепочку из родительского элемента.

Вам нужно выполнить несколько юнит-тестов, чтобы увидеть, какой из этих методов самый быстрый, или нет, если он не так важен.

Answer 4

$('#theTable tr').slice(1).remove();

При этом используется полностью действительный селектор CSS для получения всех строк таблицы, затем a .slice() набора, начинающегося с индекса 1 (вторая строка), и, наконец, вызывает .remove() для удаления строк.

Действительный селектор CSS важен, поскольку он позволяет jQuery / Sizzle успешно использовать собственный метод querySelectorAll, который обеспечит чрезвычайно быстрый выбор.

querySelectorAll поддерживается во многих браузерах, включая IE8.

---

РЕДАКТИРОВАТЬ:

Хотя вы и просили jQueryЯ решил добавить собственное решение DOM API, поскольку оно будет работать быстрее, чем все остальное, и это действительно довольно просто.

var rows = document.getElementById('theTable').rows;

while( rows[1] )
    rows[1].parentNode.removeChild( rows[1] );

Answer 5

$('#myTable').find('tr').not(":first").remove();

Пример:

http://jsfiddle.net/TwqN3/

Answer 6

Используйте селектор следующих братьев и сестер :

$ ('table: first-child ~ tr'). Remove ();

Пример: http://jsfiddle.net/TwqN3/2/ (Спасибо Стефану Кендаллу! Я не знал jsfiddle.)