HTML 표의 모든 행 삭제

HTML 표의 모든 행 삭제

---

<th>Javascript를 사용 하고 테이블의 모든 행을 반복하지 않고 HTML 테이블의 모든 행을 삭제하려면 어떻게 해야합니까? 나는 매우 큰 테이블을 가지고 있고 그들을 삭제하기 위해 행을 반복하는 동안 UI를 고정하고 싶지 않습니다.

---

킵 <th>A의 행 <thead>A의 다른 행을 <tbody>다음을 대체 할 <tbody>새로운 하늘의 하나.

즉

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

---

그러면 모든 행이 제거됩니다.

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

---

매우 조잡하지만 이것은 또한 작동합니다.

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

---

이것은 오래된 질문이지만 최근에 비슷한 문제가 발생했습니다.
이 코드를 작성하여 해결했습니다.

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]);
}

첫 번째 행을 제외한 모든 행이 제거됩니다.

건배!

---

일반적인 실수에 대한주의 사항 :

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. for 루프가 시작되기 전에 rowCount가 취해집니다.

"table.rows.length"를 삭제하면 계속 변경되므로 몇 가지 문제가 발생하므로 홀수 또는 짝수 행만 삭제됩니다.

이것들을 조심하고, 시간을 절약하고, 행운을 빕니다.

---

테이블이 하나만 있다고 가정하여 유형만으로 참조 할 수 있습니다. 헤더를 삭제하지 않으려면 :

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

그렇지 않으면:

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

도움이 되길 바랍니다!

---

@strat가 게시 한 첫 번째 및 솔루션을 제외한 모든 행을 삭제해야했지만 잡히지 않은 예외가 발생했습니다 (존재하지 않는 컨텍스트에서 노드 참조). 다음은 나를 위해 일했습니다.

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

---

If you can declare an ID for tbody you can simply run this function:

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

---

the give below code works great. It removes all rows except header row. So this code really t

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

---

this would work iteration deletetion in HTML table in native

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

---

If you have far fewer <th> rows than non-<th> rows, you could collect all the <th> rows into a string, remove the entire table, and then write <table>thstring</table> where the table used to be.

EDIT: Where, obviously, "thstring" is the html for all of the rows of <th>s.

---

This works in IE without even having to declare a var for the table and will delete all rows:

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

---

If you do not want to remove th and just want to remove the rows inside, this is working perfectly.

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

---

this is a simple code I just wrote to solve this, without removing the header row (first one).

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

Hope it works for you!!.

---

How about this:

When the page first loads, do this:

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

Then when you want to clear the table:

myTable.innerHTML=myTable.oldHTML;

The result will be your header row(s) if that's all you started with, the performance is dramatically faster than looping.

---

Assign an id or a class for your tbody.

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

You can name your id or class how you want, not necessarily #tbodyId or .tbodyClass.

---

Assing some id to tbody tag. i.e. . After this, the following line should retain the table header/footer and remove all the rows.

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

And, if you want the entire table (header/rows/footer) to wipe out, then set the id at table level i.e.

---

Just Clear the table body.

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

참고URL : https://stackoverflow.com/questions/7271490/delete-all-rows-in-an-html-table