web-dev-qa-db-ja.com

HTMLテーブルのすべての行を削除する

Javascriptを使用して、テーブル内のすべての行をループせずに、<th>を除くHTMLテーブルのすべての行を削除するにはどうすればよいですか？非常に大きなテーブルがあり、行をループして削除する間にUIをフリーズしたくない

javascripthtmlhtml-table
83
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)
77
Quentin

これにより、すべての行が削除されます。

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

非常に粗雑ですが、これも機能します：

var Table = document.getElementById("mytable");
Table.innerHTML = "";
48
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]);
}

最初の行を除くすべての行が削除されます。

乾杯！

17
cstrat

よくある間違いに関する注意点：

0からインデックスを開始するコード（または、beginからのインデックス）が必要な場合は、

次に、正しい解決策は次のとおりです。

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の引数は固定されています

行を削除すると行数が減少するため、これが必要です。
i.e; iに達するまで（rows.length-1）、またはその行が既に削除される前であっても、エラー/例外（またはサイレント）が発生します。

2. forループが開始する前にrowCountが取得されます

"table.rows.length"を削除すると変更が続くため、やはり問題があります。奇数行または偶数行のみが削除されるだけです。

これらに気をつけて、時間を節約してください。

14
Manohar Reddy Poreddy

テーブルが1つしかないため、タイプだけで参照できると仮定します。ヘッダーを削除したくない場合：

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

さもないと：

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

それが役に立てば幸い！

9
Francisco López-Sancho

IDに対してtbodyを宣言できる場合は、次の関数を実行できます。

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

@stratによって最初に投稿されたソリューションを除くすべての行を削除する必要がありましたが、キャッチされない例外が発生しました（存在しないコンテキストでNodeを参照）。次は私のために働いた。

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

以下のコードは非常に効果的です。ヘッダー行を除くすべての行を削除します。このコードは本当に

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

これは、ネイティブのHTMLテーブルで繰り返し削除を行います

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

これはIEで機能し、テーブルのvarを宣言する必要もなく、すべての行を削除します。

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

<th>行がnon<th>行よりもはるかに少ない場合は、すべての<th>行を文字列に収集し、テーブル全体を削除してから、テーブルがあった場所に<table>thstring</table>を書き込むことができます。

編集：明らかに、「thstring」は<th>sのすべての行のhtmlです。

2
yoozer8

thを削除せず、内部の行を削除するだけの場合、これは完全に機能しています。

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

これはどう：

ページが最初にロードされたら、次の操作を行います。

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

次に、テーブルをクリアする場合：

myTable.innerHTML=myTable.oldHTML;

結果がヘッダー行になります。それがすべての場合、パフォーマンスはループよりも劇的に高速です。

1
Len White

これは、ヘッダー行（最初の行）を削除せずにこれを解決するために作成した単純なコードです。

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

それがあなたのために働くことを願っています!!。

1
user3423649

TbodyにIDまたはクラスを割り当てます。

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

IDまたはクラスに好きな名前を付けることができます。必ずしも#tbodyIdまたは.tbodyClassではありません。

1
Andreea

Header＆Footerを除き、このコードを使用してテーブルのBodyを削除します。

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

テーブル本体をクリアするだけです。

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

TbodyタグにIDを割り当てます。すなわち。この後、次の行はテーブルヘッダー/フッターを保持し、すべての行を削除する必要があります。

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

また、テーブル全体（ヘッダー/行/フッター）を消去する場合は、テーブルレベルでIDを設定します。

0
Vinaykumar Patel