更改表列顺序

Question

我需要动态改变html/js表中列的顺序，你可以告诉我该怎么做？ 谢谢大家！

Answer 1

如果你只需要简单地移动列，没有任何花哨的拖放动画，下面的JS应该做的伎俩：

<script type="text/javascript"> 
    $(function() { 
     jQuery.each($("table tr"), function() { 
      $(this).children(":eq(1)").after($(this).children(":eq(0)")); 
     }); 
    }); 
</script> 

根据需要更换号码。这个概念的工作原理

看起来，写这个作为一个班轮是不可能的。包括选择器中的td，即使行选择器似乎在一个单独的索引上保留了每个td，而忽略了行。

一个jQuery网格插件应该这样做，否则。虽然我没有这种插件的经验。

Answer 2

移动列并不难：

您可以使用此功能：

jQuery.moveColumn = function (table, from, to) { 
    var rows = jQuery('tr', table); 
    var cols; 
    rows.each(function() { 
     cols = jQuery(this).children('th, td'); 
     cols.eq(from).detach().insertBefore(cols.eq(to)); 
    }); 
} 

然后调用它像这样：

var tbl = jQuery('table'); 
jQuery.moveColumn(tbl, 2, 0); 

因此，通过了解该列的索引，以及您想要放置它的索引（从零开始），您可以移动列，包括列标题。

这里是工作的jsfiddle：http://jsfiddle.net/Qsys7/1/

Answer 3

这里是一个jQuery插件，我刚写来切换两列的内容：

$.fn.switchColumns = function (col1, col2) { 
    var $this = this, 
     $tr = $this.find('tr'); 

    $tr.each(function(i, ele){ 
     var $ele = $(ele), 
      $td = $ele.find('td'), 
      $tdt; 

     $tdt = $td.eq(col1).clone(); 
     $td.eq(col1).html($td.eq(col2).html()); 
     $td.eq(col2).html($tdt.html()); 
    }); 
}; 

See example →