Переупорядочение строк таблицы со стрелками вверх и вниз?

Question

Я хочу добавить небольшие изображения-стрелки для перемещения вверх и вниз по строке таблицы в Javascript (возможно, jQuery) и сохранить переупорядоченную таблицу (только порядок) в cookie для дальнейшего использования. Например, Joomla, внутри области admin в области «Статьи» (но это делается с помощью 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, захватить событие щелчка стрелками и использовать селектор, чтобы получить следующий/предыдущий элемент и поменять их.

Затем используйте селектор, чтобы получить идентификатор каждой строки, однако вы сохраняете это: в каждой строке может быть указан идентификатор установки на tr, чтобы сделать выбор простым. Селекторы выборки: here и сохраните их в файле cookie, снова просто JS для этого here.

Answer 4

Это старый вопрос, но я нашел его, и один из постов поставил меня на правильном пути, так что для кого-либо еще, что Googles здесь

с помощью JQuery

function Func(trigger, blnUp){ 
var trigRow = $("#" + trigger.id).parent().parent(); 
var prevRow = trigrRow.prev(); 
var nextRow = trigRow.next(); 
var trigRowHTML = ""; 
if(blnUp){ 
    trigRowHTML = prevRow.html(); 
    prevRow.html(trig.html()); 
}else{ 
    trigRowHTML = nextRow.html(); 
    nextRow.html(trig.html()); 
    } 
} 

стол должен был бы выглядеть как

<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> 

Если у вас есть таблица, как другой ответ, вы должны быть в состоянии просто удалить один из .parent() звонки, и он будет делать то же самое ,

Answer 5

insertBefore() и insertAfter() работают красиво. В приведенном ниже примере у меня есть пара тегов A в таблице. Щелчок по одному перемещает строку вниз, а другой вверх. Если вы даете своим строкам, которым разрешено перемещаться (возможно, вы не хотите перемещать строки над строками заголовка или ниже строк нижнего колонтитула) класса _movable, тогда они будут перемещаться только между строками заголовка и нижнего колонтитула.

Вот один из тегов A: < a onclick = "return moveUp (this);" href = "javascript: return 0;" > до </а >

 
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); 
     } 
    });