프로토 타입 1.5.1에서 형제 요소를 위/아래로 어떻게 이동합니까?

Question

양식의 테이블 행을 '위로'및 '아래로'이동할 수있는 기능을 설정하려고합니다. 테이블 행의 수는 동적입니다. 사용자는 버튼을 눌러 행을 추가 할 수 있습니다. 각 테이블 행에는 여러 필드가 있습니다. 다른 클래스 이름을 가진 머리글 행과 바닥 글 행이 있으므로 hasClassName을 확인하십시오.

필자는이 기능을 처음 프로토 타입 1.6과 함께 사용하기 전에 성공적으로 작성하여 버전 1.5.1에서 작동하게했습니다. 테스팅에 시간이 필요할 때 우리는 Prototype의 최신 버전으로 업그레이드 할 것이지만, 우리 프로젝트의 현재 버전에서 작동하려면이 버전이 필요합니다.

주요 문제는 1.5에서는 요소를 삽입 내용으로 삽입 할 수 없다는 것입니다. 즉, 삽입하려는 요소의 HTML이 필요합니다. 이것은 HTML 요소 (변수 "insertHTML")에 액세스 할 때 원본 HTML이며 사용자가 관련 양식 요소에 입력 한 정보를 포함하지 않는다는 문제를 야기합니다.

도움을 주시면 감사하겠습니다.

moveDataDef: function(num, dir) { 
    var targRow = $('dataDefItem'+num); 
    var content = targRow.innerHTML; 
    var siblings; 
    var insertHTML = targRow.inspect() + targRow.innerHTML + '</tr>'; 

    if(dir == 'up') 
     siblings = targRow.previousSiblings(); 
    else 
     siblings = targRow.nextSiblings(); 

    if (siblings[0].hasClassName('dataDefItem')) { 
     targRow.remove(); 
     if(dir == 'up') 
      new Insertion.Before(siblings[siblings.length - 1].id, targRow); 
     else 
      new Insertion.After(siblings[0].id, targRow); 
    } 
} 

Answer 1

이 코드의 일부를 사용하여 하위 블록을 교체 할 수 있습니다.

<table id="tb1"> 
<tbody> 
<tr id="tr1"><td>1</td></tr> 
<tr id="tr2"><td>2</td></tr> 
<tr id="tr3"><td>3</td></tr> 
</tbody> 
</table> 

<script type="text/javascript"> 
/* <![CDATA[ */ 
(function(){ 
var trr3 = $('tr3'); 
var tp = trr3.parentNode; 
var trr1 =trr3.previousSiblings(); 
trr3.remove(); 
tp.insertBefore(trr3, trr1[0]); 
})(); 
/* ]]> */ 
</script> 

감사합니다 : 당신이 관심이 있다면,이 내 POC 코드, 참고로

if (siblings[0].hasClassName('dataDefItem')) { 
    var targetParent = targRow.parentNode; 
    var sibling = siblings[0]; 

    if(dir == 'up'){ 
    targRow.remove(); 
    targetParent.insertBefore(targRow, sibling); 
    } else { 
    sibling.remove(); 
    targetParent.insertBefore(sibling, targRow); 
    } 
} 

: 그것은 기본 DOM 기능, 즉 에 insertbefore()를 사용합니다.

업데이트 : 오타가 수정되었습니다 (''및 '}'이 누락되었습니다).