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

IDfor tbody를 선언 할 수 있다면 다음 함수를 실행하면됩니다.

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

이것은 기본 HTML 테이블에서 반복 삭제를 작동합니다.

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

아래 코드는 훌륭하게 작동합니다. 헤더 행을 제외한 모든 행을 제거합니다. 그래서이 코드는

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

일부 ID를 tbody 태그로 지정합니다. 즉. 그 후 다음 줄은 표 머리글 / 바닥 글을 유지하고 모든 행을 제거해야합니다.

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

그리고 전체 테이블 (머리글 / 행 / 바닥 글)을 지우려면 테이블 수준에서 ID를 설정합니다.

제거 th하고 싶지 않고 내부 행을 제거하려는 경우 완벽하게 작동합니다.

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

이건 어때요:

페이지가 처음로드되면 다음을 수행하십시오.

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

그런 다음 테이블을 지우고 싶을 때 :

myTable.innerHTML=myTable.oldHTML;

결과는 헤더 행이 될 것입니다. 시작하면 성능이 루핑보다 훨씬 빠릅니다.

<th>행이 아닌 행보다 훨씬 적 으면 <th>모든 <th>행을 문자열로 수집 하고 전체 테이블을 제거한 다음<table>thstring</table> 테이블이 있던 위치에 수 있습니다.

편집 : 분명히 "thstring"은 <th>s의 모든 행에 대한 html입니다 .

이것은 테이블에 대한 var를 선언하지 않고도 IE에서 작동하며 모든 행을 삭제합니다.

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

이것은 헤더 행 (첫 번째 행)을 제거하지 않고이 문제를 해결하기 위해 방금 작성한 간단한 코드입니다.

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

그것이 당신을 위해 작동하기를 바랍니다 !!.

tbody에 대한 ID 또는 클래스를 지정하십시오.

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

당신은 반드시 당신이 원하는 방법 ID 또는 클래스 이름을 지정할 수 있습니다 #tbodyId또는 .tbodyClass.

테이블 본체를 지우십시오.

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

const 테이블 = document.querySelector ( 'table'); table.innerHTML === ''? null : table.innerHTML = ''; 위의 자바 스크립트가 잘 작동했습니다. 테이블에 데이터가 포함되어 있는지 확인한 다음 헤더를 포함한 모든 항목을 지 웁니다.