주어진 행 ID 배열을 기반으로 jQuery로 HTML 표 재 배열

각 데이터 행에 고유 한 id 속성이있는 HTML 표가 있습니다. 나는 데이터를 위해 서버를 폴링하고 테이블을 다시 정렬하는 결과를 사용하는 스크립트를 작성 중입니다. 서버에서, 나는 다음과 같은 배열을받을 : 그래서주어진 행 ID 배열을 기반으로 jQuery로 HTML 표 재 배열

<tr id="user-1">...</tr> 
<tr id="user-2">...</tr> 
<tr id="user-3">...</tr> 
<tr id="user-4">...</tr> 
<tr id="user-5">...</tr> 
<tr id="user-6">...</tr>

가이 같은 사용자에게 나타납니다 :

var order_arr = [6, 4, 2, 1, 5, 3]

하는 I는 다음과 같이 시각적으로 재 분류에 일부 테이블 데이터를 사용하려면 어떤 :

<tr id="user-6">...</tr> 
<tr id="user-4">...</tr> 
<tr id="user-2">...</tr> 
<tr id="user-1">...</tr> 
<tr id="user-5">...</tr> 
<tr id="user-3">...</tr>

내가이 작업을 수행하는 몇 가지 jQuery code on jsFiddle 썼다, 그러나 가장 좋은 방법인지 모르겠어요. <tr> 요소의 배열을 반입하고 각 행 ID의 해당 색인을 기반으로 정렬합니다. 전체 테이블 본문 내용을 바꿀 뿐인 .html() 호출로 끝납니다.

.. 그래서 TL; DR :

시각적 재정렬 배열 행 ID의 원하는 순서 채 주어진 HTML 테이블에 가장 좋은 방법 this code인가?
어떻게 애니메이션으로 만들 수 있습니까? 나는 내가 각 테이블 행은 절대 위치 가있는 대신 CSS 해킹으로이 쓸 수 생각 난 그냥 각 행은 보유해야하는 위치 계산 후 .animate() 를 실행할 수 있습니다. 생각 대 내 현재 코드?

출처

2011-03-02 Jon Gauthier

테이블이 실제로 DOM으로 정렬하거나 시각적으로 정렬 할 필요합니까? – Endophage

시각적으로 분류 할 수 있습니다. 괜찮습니다. 그게 내 CSS 애니메이션 아이디어로 생각한거야. 죄송합니다. 그런 식으로 설명하면 잘못된 메시지가 표시 될 수 있습니다. –

내 CSS 정렬 아이디어는 다음과 같습니다. http://jsfiddle.net/hans/6qVf5/3/ –

원본 기능을 유지하고 애니메이션을 추가 한 최상의 해결책은 CSS와 함께있었습니다. 여기에 관련 JS입니다 :

function sort(order_arr) { 
    var top = 0;  
    $.each(order_arr, function(idx, val) { 
     var el = $('tbody tr#user-' + val); 

     el.animate({ 
      position: 'absolute', 
      top: top + 'px' 
     }, 400); 
     top += el.outerHeight(); 
    }); 
}

Demo on jsFiddle

출처

2011-03-22 05:30:15

주어진 행 ID 배열을 기반으로 jQuery로 HTML 표 재 배열

답변

관련 문제