위쪽 및 아래쪽 화살표 이미지가있는 테이블 행을 재정렬 하시겠습니까?

Question

Javascript (아마도 jQuery)의 테이블 행을 위아래로 이동하고 순서가 재정렬 된 테이블 (순서 만)을 추가 사용을 위해 쿠키에 저장하기 위해 작은 이미지 - 화살표를 추가하고 싶습니다. 예를 들어 - Joomla, 기사 영역의 관리 영역 (PHP로 완료)입니다. 감사.

Answer 1

아마 조금 더 리팩토링,하지만 난 당신에게 절약을 떠날 수 있습니다

function swap(a, b, direction){ 
    var html = a.wrapInner('<tr></tr>').html() 
    a.replaceWith(b.wrapInner('<tr></tr>').html()) 
    b.replaceWith(html) 
} 
function getParent(cell){ return $(cell).parent('tr') } 
$(document).ready(function(){ 
    $('.upArrow').live('click', function(){ 
    var parent = getParent(this) 
    var prev = parent.prev('tr') 
    if(prev.length == 1){ swap(prev, parent); } 
    }) 
    $('.downArrow').live('click', function(){ 
    var parent = getParent(this) 
    var next = parent.next('tr') 
    if(next.length == 1){ swap(next, parent) } 
    }) 
}) 

이 테이블 가정 :

<table> 
    <tbody> 
    <tr><td>1</td><td class="upArrow">up</td><td class="downArrow">down</td></tr> 
    <tr><td>2</td><td class="upArrow">up</td><td class="downArrow">down</td></tr> 
    <tr><td>3</td><td class="upArrow">up</td><td class="downArrow">down</td></tr> 
    </tbody> 
</table> 

Answer 2

jQuery의 경우에는 this plugin을 수정하여 드래그 앤 드롭 대신 아이콘을 클릭하여 사용할 수 있습니다.

Answer 3

간단한 jQuery 선택기로 화살표를 클릭하고 다음/이전 요소를 가져 와서 바꾸려면 선택기를 사용하여이를 수행 할 수 있어야합니다.

그런 다음 선택기를 사용하면 각 행의 ID를 가져올 수 있지만 저장하는 중입니다. 선택을 쉽게하기 위해 각 행에서 설정 ID를 식별 할 수 있습니다. 샘플 선택기는 here이며 쿠키에 저장합니다. 다시 간단한 JS로 here입니다.

Answer 4

이 오래된 질문입니다,하지만 난 그것을 하나의 발견 jQuery를

사용하여 여기

구글의 그 다른 사람에 대한 있도록 게시물의 오른쪽 코스 나 설정

테이블, 당신은 단지 .parent 중 하나() 호출을 제거 할 수 있어야한다 당신이 다른 대답 같은 테이블이있는 경우

<table> 
    <tbody> 
    <tr><td>1</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr> 
    <tr><td>2</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr> 
    <tr><td>3</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr> 
    </tbody> 
</table> 

처럼 보일 필요가 있으며 동일한 작업을 수행합니다 .

Answer 5

insertBefore() 및 insertAfter()가 제대로 작동합니다. 아래의 예에서는 테이블에 두 개의 태그가 있습니다. 하나를 클릭하면 행이 아래로 이동하고 다른 행은 위로 이동합니다. 이동할 수있는 행을 제공하면 (헤더 행 위 또는 아래 꼬리 행 위의 행을 이동하지 않으려는 경우도 있음) _movable 클래스는 머리글과 바닥 글 행 사이에서만 이동합니다.

여기에 A 태그 중 하나가 있습니다. < a onclick = "return moveUp (this);" href = "javascript : return 0;" < 최대 >/A >

 
function moveUp(aEl) { 
    var me = $($(aEl).parents('tr').get(0)); 
    var prev = me.prev('tr'); 
    if (prev.attr('class') == '_movable') me.insertBefore(prev); 
    return false; 
} 
function moveDown(aEl) { 
    var me = $($(aEl).parents('tr').get(0)); 
    var next = me.next('tr'); 
    if (next.attr('class') == '_movable') me.insertAfter(next); 
    return false; 
} 

Answer 6

function UpperBttn_Pressed(this) { 

    var RowIndex = X.parentNode.parentNode.rowIndex; 
    var ParentTable = X.parentNode.parentNode.parentElement; 
    if (RowIndex != 0 && RowIndex != 1) { 
     ParentTable.moveRow(RowIndex, RowIndex - 1); 
    } 

} 
function DownBttn_Pressed(this) { 

    var RowIndex = X.parentNode.parentNode.rowIndex; 
    var ParentTable = X.parentNode.parentNode.parentElement; 
    var NthRow = GetElement("dataTable").rows.length; 
    if (RowIndex!=NthRow-1) { 
     ParentTable.moveRow(RowIndex, RowIndex + 1); 
    } 

} 

Answer 7

$('.upArrow').livequery('click', function() { 
     var row = $(this).closest('tr'); 
     var prev = row.prev(); 
     if (prev.length == 1) { 
       row.detach(); 
       prev.before(row); 
     } 
    }); 
    $('.downArrow').livequery('click', function() { 
     var row = $(this).closest('tr'); 
     var next = row.next('tr'); 
     if (next.length == 1) { 
      row.detach(); 
      next.after(row); 
     } 
    });