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

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

이것이 매우 큰 표(3000줄)의 내용을 빠르게 제거할 수 있는 방법이라고 생각했습니다.

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

하지만 파이어폭스에서 완료하는 데는 약 5초가 걸립니다.3000 행을 브라우저에 로드하는 것 외에 바보 같은 짓을 하고 있습니까?더 빠른 방법이 있습니까?

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

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

루프 유형을 피하는 것이 좋습니다. 모든 요소를 다음과 같이 직접 제거하십시오.

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

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

머리글에 닿지 않습니다.

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

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

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

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

또한 효율성을 말할 때도 주의해야 합니다.$(target).find(child)구문이 보다 빠름$(target > child)왜요? 지글지글!

3,161개의 테이블 행을 비우는 데 걸리는 시간

분리() 방법 사용(위의 예 참조):

• 파이어폭스: 0.027s
• 크롬: 0.027s
• 에지: 1.73s
• IE11: 4.02s

빈() 메서드 사용:

• 파이어폭스: 0.055s
• 크롬: 0.052s
• 에지: 137.99s(냉동 상태)
• IE11: 정지하고 다시는 돌아오지 않음

여기서 확인할 수 있는 두 가지 문제:

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

2. 다른 하나는 많은 양의 표 형식 데이터의 경우 서버에서 데이터를 즉시 로드할 수 있는 우수한 데이터 테이블과 같은 데이터 그리드 라이브러리를 고려할 수 있으므로 네트워크 호출 수는 증가하지만 호출 크기는 감소합니다.1500개의 행이 있는 매우 복잡한 테이블을 가지고 있었는데, 이 테이블은 상당히 느려졌고, 새로운 AJAX 기반 테이블로 변경하여 동일한 데이터가 다소 빠른 것처럼 보였습니다.

이것은 나에게 효과가 있습니다.

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

2-in the jQuery

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

빠른 제거만 원할 경우..당신은 아래와 같이 할 수 있습니다.

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

하지만 테이블에 이벤트 관련 요소가 있을 수 있습니다.

그런 경우에는,

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

미안해요..

당신도 해볼 수 있어요...

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

언급URL : https://stackoverflow.com/questions/723112/jquery-fastest-way-to-remove-all-rows-from-a-very-large-table