Как я могу удалить все строки таблицы HTML, кроме <th>
с помощью Javascript, и не перебирать все строки в таблице? У меня очень большая таблица, и я не хочу замораживать пользовательский интерфейс, пока я перебираю строки, чтобы удалить их.
Удалить все строки в таблице HTML
Ответ 1
Сохраните строку <th>
в <thead>
и других строках в <tbody>
, затем замените <tbody>
на новую, пустую.
то есть.
var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
Ответ 2
это приведет к удалению всех строк:
$("#table_of_items tr").remove();
Ответ 3
Очень грубо, но это также работает:
var Table = document.getElementById("mytable");
Table.innerHTML = "";
Ответ 4
Это старый вопрос, однако у меня недавно была аналогичная проблема.
Я написал этот код для его решения:
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]);
}
Это приведет к удалению всех строк, кроме первого.
Ура!
Ответ 5
Указывает на общие ошибки:
Если вам нравится код для запуска индекса с 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" будет продолжать меняться, так что снова у вас есть проблема, что удаляются только нечетные или четные строки.
Следите за ними, экономьте время, удачи.
Ответ 6
Предполагая, что у вас есть только одна таблица, поэтому вы можете ссылаться на нее только с типом. Если вы не хотите удалять заголовки:
$("tbody").children().remove()
иначе:
$("table").children().remove()
надеюсь, что это поможет!
Ответ 7
Если вы можете объявить ID
для tbody
, вы можете просто запустить эту функцию:
var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
Ответ 8
Мне нужно было удалить все строки, кроме первого, и решение, отправленное @strat, но это привело к неперехваченному исключению (ссылаясь на Node в контексте, где он не существует). Следующие работали для меня.
var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
myTable.deleteRow(x);
}
Ответ 9
ниже код работает отлично. Он удаляет все строки, кроме строки заголовка. Так что этот код действительно t
$("#Your_Table tr>td").remove();
Ответ 10
Если у вас гораздо меньше строк <th>
, чем не <th>
, вы можете собрать все строки <th>
в строку, удалить всю таблицу и затем написать <table>thstring</table>
, где использовалась таблица.
EDIT: где, очевидно, "thstring" - это html для всех строк <th>
s.
Ответ 11
Это работает в IE, даже не объявляя var для таблицы и удаляя все строки:
for(var i = 0; i < resultsTable.rows.length;)
{
resultsTable.deleteRow(i);
}
Ответ 12
это простой код, который я только что написал, чтобы решить эту проблему, не удаляя строку заголовка (первая).
var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}
Надеюсь, что это сработает для вас!
Ответ 13
Если вы не хотите удалять th
и просто хотите удалить строки внутри, это работает отлично.
var tb = document.getElementById('tableId');
while(tb.rows.length > 1) {
tb.deleteRow(1);
}
Ответ 14
это приведет к удалению итерации в таблице HTML в native
document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
Ответ 15
Просто очистите тело таблицы.
$("#tblbody").html("");
Ответ 16
Как насчет этого:
Когда страница загружается первой, сделайте следующее:
var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;
Затем, когда вы хотите очистить таблицу:
myTable.innerHTML=myTable.oldHTML;
Результатом будет ваша строка заголовка, если все, с чего вы начали, производительность значительно быстрее, чем цикл.
Ответ 17
Назначьте идентификатор или класс для вашего тела.
document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();
Вы можете назвать свой идентификатор или класс так, как хотите, не обязательно #tbodyId
или .tbodyClass
.
Ответ 18
За исключением Header
и Footer
вы используете этот код для удаления Body
.
$("#YourTableId tr").not(':first, :last').remove();