如何通过jQuery在

Question

这样做的优雅方式是什么？如何通过jQuery在<table>内向上或向下移动<tr>？

Answer 1

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

Answer 2

我会分配ID给我所有的<tr>秒。

Answer 3

这是我为你写的一个快速插件。 在桌子上调用它，并将旧的行和新的行位置给它。

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

Alex的答案的伟大工程，却发现一个问题，如果你移动的东西到列表的最后，它不能插入它。下面是修复它稍微调整了版本...

$.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 6

如果你想将它移动到顶部或底部会更容易些，虽然这不会帮助你:(

//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)')); 

将第二前移动第三子（该指数法是基于0）