HTML 테이블에서 행 제거

Question

동적으로 일부 행을 제거하는 다소 큰 테이블이 있습니다. 그것은 효과가 있지만 매우 느립니다. 지금은 약 소요됩니다. 1.5 초 IE8과 Firefox (브라우저간에 거의 차이) 50 행을 제거합니다.

DOM 조작이 일반적으로 느리다는 것을 알고 있지만이를 수행하는 더 빠른 방법이 있어야합니다.

는 지금,이 구문을 사용하고 다음 slice() 방법

$("#myTable tr").slice(250, 300).remove(); 

오프셋이 다를 수 있습니다. 을 사용합니다. 이는 jQuerys 도움말 및 다른 방법으로 동일한 작업 (예 : find() 또는 eq())을 수행하는 것이 좋기 때문에 권장됩니다. 나는 제거하기 전에 empty()을 읽는 것에 대해 읽었지 만, 그것은 더 느렸다.

Answer 1

실제 자바 스크립트를 사용하여 고려 도움이되기를 바랍니다 : 당신이 jsfiddle에서 볼 수 있듯이 http://jsfiddle.net/MbXX5/

var removeRows = function(ofTable,from,to) { 
    for(var row=to; row>=from; --row) { 
     ofTable.deleteRow(row); 
    } 
}; 

,이 순간입니다. 행 번호가 정확하도록 행을 역순으로 탐색합니다. 브라우저에서 사용하는 DOM 코드 및 JIT 전략에 따라 성능이 향상 될 수 있습니다.

이 참으로 조금 더 빠르게 IE에서 (<100 밀리 초) 동안 파이어 폭스의 차이가 없습니다

Answer 2

각 행 제거에 DOM의 화면보기를 업데이트하려고 당신은 필터를 사용할 수 있지만 나는 문제는 브라우저입니다

$("#myTable tr").filter(function(index){ 
    return index > 250 && index < 300; 
).remove(); 

Answer 3

빠를 것이라고 생각하지 않습니다.

당신은 문서에서 테이블을 제거하는 모든 행과 후, 복제에 요소를 제거, 테이블을 복제 다시

를 삽입을 교체하는 것을 제거

• 중 하나에 의해 그것을 할 수 있습니다 복제 테이블
• 또는 나머지 행의 양이 사람을 제거보다, 당신은 새로운 테이블을 생성한다는 점에서 모든 행을 삽입하고 새

0123으로 기존의 테이블을 대체 할 수있는 작은 경우

주요 아이디어는 제거를 수행 할 때 테이블에 DOM을 첨부하지 않는 것입니다. 이렇게하면 모든 행이 제거 된 후에 만보기가 업데이트됩니다.

Answer 4

각 행에 ID를 추가 할 수 있습니까? 그런 다음 ID로 행을 직접 선택하고 행을 제거 하시겠습니까? 좋아요 :

jQuery는 자바 스크립트 위에 있습니다. 자바 스크립트를 직접 사용하는 것이 더 빠릅니다.

편집 : 그래서 브라우저가 각각 제거 후 업데이트되지 않습니다 편집하는 동안 테이블을 숨기기 : 2

for(i=250;i<=300;i++) 
{ 
    var el = document.GetElementById("RowID_" + i); 
    document.removeChild(el); 
} 

편집 : 는 당연히이 같은 루프를 만들 수 있습니까? ;)

Answer 5

문제는 .remove()하는 모든 행에 대해 브라우저가 테이블을 다시 그립니다. 더 빠르게하려면 DOM에서 테이블을 제거하고 선을 꺼내 테이블을 그 자리에 다시 놓습니다.

$table = $("#myTable").clone(true,true);//First true to keep events, second true to deepcopy childs too. Remove it if you do not need it to make it faster. 
$table.find("tr").slice(250,300);remove(); 
$("#myTable").replaceWith($table); 

Answer 6

시도해보십시오.난 경우에 jQuery를가 새로 고침을 렌더링 트리거, 그것은 당신이

$("#myTable tr").slice(250, 300).html('');