Question

我需要动态更改html / js表中列的顺序，你可以告诉我该怎么做吗？

Answer 1

移动列并不难：

您可以使用此功能：

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 2

如果您只需要在没有任何花哨的拖放动画的情况下简单地移动列，则以下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 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 →

Answer 4

按名称更改列
A | B | C
C | A | B

div

示例：http://jsfiddle.net/hw3nmeqb/

更改表列顺序

4 个答案: