jquery-매우 큰 테이블에서 모든 행을 제거하는 가장 빠른 방법

매우 큰 테이블 (3000 행)의 내용을 제거하는 빠른 방법이라고 생각했습니다.

$jq("tbody", myTable).remove();

하지만 파이어 폭스에서 완료하는 데 약 5 초가 걸립니다. 내가 멍청한 일을하고 있습니까 (브라우저에 3000 행을로드하는 것 외에)? 더 빠른 방법이 있습니까?

$("#your-table-id").empty();

그것은 당신이 얻는 것만 큼 빠릅니다.

모든 종류의 루프를 피하는 것이 좋습니다. 다음과 같이 모든 요소를 ​​직접 제거하십시오.

$("#mytable > tbody").html("");

분리를 사용하면 여기에있는 다른 답변보다 훨씬 빠릅니다.

$('#mytable').find('tbody').detach();

detach가 제거되었으므로 tbody 요소를 테이블에 다시 넣는 것을 잊지 마십시오.

$('#mytable').append($('<tbody>'));  

또한 효율성 $(target).find(child)구문을 말할 때 $(target > child). 왜? 타는 듯이 덥다!

3,161 개의 테이블 행을 비우는 데 경과 된 시간

Detach () 메서드 사용 (위의 예에서 볼 수 있음) :

• Firefox : 0.027 초
• 크롬 : 0.027 초
• 가장자리 : 1.73s
• IE11 : 4.02 초

empty () 메서드 사용 :

• Firefox : 0.055 초
• 크롬 : 0.052s
• Edge : 137.99s (동결 될 수도 있음)
• IE11 : 정지하고 반환되지 않음

$("#myTable > tbody").empty();

헤더는 건드리지 않습니다.

여기서 볼 수있는 두 가지 문제 :

1. jQuery의 empty () 및 remove () 메소드는 실제로 상당한 작업을 수행합니다. 이유는 John Resig의 JavaScript 함수 호출 프로파일 링 을 참조하십시오 .

2. 다른 한 가지는 많은 양의 테이블 형식 데이터의 경우 우수한 DataTables 와 같은 데이터 그리드 라이브러리 를 사용하여 서버에서 데이터를 즉시로드하여 네트워크 호출 수를 늘리지 만 해당 호출의 크기를 줄일 수 있다는 것입니다. 나는 1500 개의 행이있는 매우 복잡한 테이블을 가지고있어서 상당히 느려서 새로운 AJAX 기반 테이블로 변경하면 동일한 데이터가 다소 빨라 보입니다.

빨리 제거하고 싶다면 .. 아래와 같이 할 수 있습니다 ..

$( "#tableId tbody tr" ).each( function(){
  this.parentNode.removeChild( this ); 
});

그러나 테이블에 이벤트 바인딩 요소가있을 수 있습니다.

이 경우

위의 코드는 IE에서 메모리 누수를 방지하지 않습니다 ... TT 및 FF에서 빠르지 않습니다 ...

죄송합니다....

이것은 나를 위해 작동합니다.

1- 각 행 "removeRow"에 대한 클래스 추가

2- jQuery에서

$(".removeRow").remove();

시도해 볼 수 있습니다 ...

var myTable= document.getElementById("myTable");
if(myTable== null)
    return;
var oTBody = myTable.getElementsByTagName("TBODY")[0];
if(oTBody== null)
    return;
try
{
    oTBody.innerHTML = "";
}
catch(e)
{
    for(var i=0, j=myTable.rows.length; i<j; i++)
        myTable.deleteRow(0);
}