테이블 요소가 접히지 않도록하기

Question

table 안에있는 모든 콘텐츠를 다시로드하는 기능이 있습니다.

현재 테이블 행이 제거되고 다시 추가되면 테이블이 축소됩니다.

작업이 완료되면 이전 테이블 크기를 유지하고 "해제"할 수있는 방법이 있습니까? 이렇게하면

function loadValues() { 

    $('#tableId tbody').empty(); // Table rows are being removed here 

    $.post("page.php?action=getValues", 
     {}, 
     function(dataT) { 

      for (var i in dataT) { 

       var data = dataT[i]; 

       $('#tableId tbody').append(
        '<tr>' 
         + '<td>data.id</td>' 
         + '<td>data.other</td>' 
        '</tr>' 
       ); 
      } 

     } 
     ,"json" 
    ); 

} 

Answer 1

:

function loadValues() { 
    $.post("page.php?action=getValues", 
     {}, 
     function(dataT) { 
      $('#tableId tbody').empty(); // Table rows are being removed here 
      for (var i in dataT) { 
       var data = dataT[i]; 
       $('#tableId tbody').append(
        '<tr>' 
         + '<td>data.id</td>' 
        '</tr>' 
       ); 
      } 
     } 
     ,"json" 
    ); 
} 

표는 붕괴되지 않습니다. 그 이유는 사용자 스크립트가 실행되는 동안 창은 업데이트되지 않기 때문입니다. 첫 번째 버전에서는 사용자 스크립트가 서버의 응답을 기다리는 동안 중지해야했기 때문에 축소가 표시되었습니다.

---

세부 사항은 성능이 필요하고 당신은 많은 행을 추가하는 경우 : 그것은 큰 HTML 문자열을 구축하는 것이 더 효율적이고 마지막에 하나의 APPEND을한다. 이 경우 보통 다음과 같이 진행합니다.

function loadValues() { 
    $.post("page.php?action=getValues", 
     {}, 
     function(dataT) { 
      var html = ''; 
      for (var i in dataT) { 
       var data = dataT[i]; 
       html += '<tr>' 
        + '<td>'+data.id+'</td>' 
       '</tr>' 
       ; 
      } 
      $('#tableId tbody').html(html); 
     } 
     ,"json" 
    ); 
} 

그런 다음 DOM이 한 번만 변경됩니다.