Как переместить <tr>вверх или вниз в пределах <table>через jQuery?

Question

Какой элегантный способ сделать это?

Answer 1

Вот быстрый плагин, который я написал для вас. Вызовите его на стол и задайте ему старый ряд и новую позицию.

$.fn.extend({ 
  moveRow: function(oldPosition, newPosition) { 
    return this.each(function(){ 
      var row = $(this).find('tr').eq(oldPosition).remove(); 
      $(this).find('tr').eq(newPosition).before(row); 
    }); 
   } 
 }); 

$('#myTable').moveRow(4, 3);

Вот пример на jsbin: http://jsbin.com/uroyi

Answer 2

Ответ Алекса прекрасно работает, но обнаружил одну проблему: если вы перемещаете что-то в самый конец списка, оно не может быть вставлено. Вот слегка подправленная версия, которая исправляет это ...

$.fn.extend({
    moveRow: function (oldPosition, newPosition) {
        return this.each(function () {
            var row = $(this).find('tr').eq(oldPosition).detach();
            if (newPosition == $(this).find('tr').length) {
                $(this).find('tr').eq(newPosition - 1).after(row);
            }
            else {
                $(this).find('tr').eq(newPosition).before(row);
            }
        });
    }
});

Answer 3

Если вы хотите переместить его вверх или вниз, было бы легче, хотя это не помогло бы вам: (

//lets say you want to avoid/skip table headers and use a tbody
var tbody = $('tbody','#table');
//now you want a specific row bring to top
$('tr.chieftan',tbody).prependTo(tbody);

Чтобы перейти от определенного индекса к определенному:

$('li:eq(2)').insertBefore($('li:eq(1)'));

Переместит 3-го ребенка до 2-го (индексы основаны на 0).

Answer 4

Вот две функции javascript, которые будут выполнять эту работу:

    function MoveRowDown(tableId, index)
    {
        var rows = $("#" + tableId + " tr");

        rows.eq(index).insertAfter(rows.eq(index + 1));
    }

    function MoveRowUp(tableId, index)
    {           
        var rows = $("#" + tableId + " tr");

        rows.eq(index).insertBefore(rows.eq(index - 1));
    }

Answer 5

Я бы назначил идентификаторы всем своим <tr> с.

Answer 6

HTML

<table id="t1">
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>efg</td>
    </tr>
</table>

Javascript (jQuery) :

var row0 = $('#t1 tr:eq(0)');
$('#t1 tr:eq(1)').after(row0.contents());
row0.remove();