it-roy-ru.com

Удалить все строки в таблице HTML

Как я могу удалить все строки таблицы HTML, за исключением <th>, используя Javascript и не просматривая все строки в таблице? У меня очень большая таблица, и я не хочу замораживать пользовательский интерфейс, пока я перебираю строки, чтобы удалить их

74
K''

Сохраните строку <th> в <thead>, а остальные строки в <tbody>, затем замените <tbody> новым пустым.

то есть.

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
68
Quentin

это удалит все строки:

$("#table_of_items tr").remove(); 
68
Apparao

Очень грубо, но это также работает:

var Table = document.getElementById("mytable");
Table.innerHTML = "";
45
Marcel

Это старый вопрос, однако у меня недавно была похожая проблема.
Я написал этот код для его решения:

var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;

for (var x=rowCount-1; x>0; x--) {
   elmtTable.removeChild(tableRows[x]);
}

Это удалит все строки, кроме первого. 

Ура!

15
cstrat

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

Если вам нравится код для начала индекса с 0 (или некоторый индекс с начала),

тогда правильное решение:

var tableHeaderRowCount = 1;
var table = document.getElementById('WRITE_YOUR_HTML_TABLE_NAME_HERE');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
    table.deleteRow(tableHeaderRowCount);
}

1. аргумент для deleteRow исправлен

это необходимо, поскольку при удалении строки количество строк уменьшается. 
.__ то есть. к тому времени, когда я достигну (rows.length - 1), или даже до того, как эта строка уже будет удалена, так что у вас будет какая-то ошибка/исключение (или молчание).

2. rowCount берется до начала цикла for

так как при удалении «table.rows.length» будет продолжать меняться, поэтому у вас снова возникает проблема: удаляются только нечетные или четные строки. 

Следите за этим, сэкономьте время, удачи.

12
Manohar Reddy Poreddy

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

$("tbody").children().remove()

иначе:

$("table").children().remove()

надеюсь, поможет!

8
Francisco López-Sancho

Если вы можете объявить ID для tbody, вы можете просто запустить эту функцию:

var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}
6
OSB

Мне нужно было удалить все строки, кроме первой и решения, опубликованного @strat, но это привело к неперехваченному исключению (ссылаясь на узел в контексте, где он не существует). Следующее сработало для меня. 

var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
   myTable.deleteRow(x);
}
5
lkan

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

$("#Your_Table tr>td").remove();
3
sid

Это работает в IE, даже не объявляя переменную для таблицы, и удаляет все строки:

for(var i = 0; i < resultsTable.rows.length;)
{   
   resultsTable.deleteRow(i);
}
2
Lester Northe

Если у вас гораздо меньше строк <th>, чем не -<th> строк, вы можете собрать все строки <th> в строку, удалить всю таблицу и затем написать <table>thstring</table> где стол раньше был.

Правка: Где, очевидно, "thstring" является HTML для всех строк <th>s.

2
yoozer8

это будет работать удаление итерации в HTML-таблице в нативном

document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
1
HuntsMan

это простой код, который я только что написал, чтобы решить эту проблему, не удаляя строку заголовка (первую).

var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}

Надеюсь, это работает для вас!.

1
user3423649

Если вы не хотите удалять th и просто хотите удалить строки внутри, это работает отлично.

var tb = document.getElementById('tableId');
  while(tb.rows.length > 1) {
  tb.deleteRow(1);
}
1
Suresh Atta

За исключением Header & Footer вы используете этот код для удаления таблицы Body.

$("#YourTableId tr").not(':first, :last').remove();
0
sebu

Как насчет этого:

Когда страница впервые загружается, сделайте это:

var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;

Затем, когда вы хотите очистить таблицу:

myTable.innerHTML=myTable.oldHTML;

Результатом будут ваши строки заголовка, если это все, с чего вы начали, производительность значительно выше, чем зацикливание.

0
Len White

Назначьте идентификатор или класс для вашего тела. 

document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();

Вы можете назвать свой идентификатор или класс, как вы хотите, не обязательно #tbodyId или .tbodyClass.

0
Andreea

Просто очистите тело стола.

$("#tblbody").html("");
0
siva

Назначение некоторого идентификатора тегу tbody. то есть После этого следующая строка должна сохранить верхний/нижний колонтитул таблицы и удалить все строки.

document.getElementById("yourID").innerHTML="";

И, если вы хотите, чтобы вся таблица (верхний колонтитул/строки/нижний колонтитул) была удалена, то установите идентификатор на уровне таблицы, т.е.

0
Vinaykumar Patel