Javascript 更改表列顺序

我需要在html/js中动态更改表中列的顺序，您可以告诉我如何操作？

如果您只需要简单地移动列，而不需要任何奇特的拖放动画，下面的js应该可以做到这一点：

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

$（函数（）{
each（$（“table tr”），函数（）{
$（this.children（“：eq（1）”）。在（$（this.children（：eq（0）”）之后；
});
});

必要时更换号码。这个概念是有效的

似乎把它写成一行是不可能的。在选择器中包含td，即使使用行选择器，似乎也会将每个td保存在单独的索引中，忽略行

---

否则，jQuery网格插件就应该做到这一点。虽然我没有使用此类插件的经验。

移动列并不是那么难：

您可以使用此功能：

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

因此，通过知道列的索引以及要将其放置在何处的索引（从零开始），可以移动列，包括列标题

---

以下是正在工作的JSFIDLE:

以下是我刚刚编写的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() );
    });
};

---

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

var新表=[
{
名称：“C列”，
索引：0，//实际索引
科尔斯：[]
},
{
名称：“A列”，
索引：0，
科尔斯：[]
},
{
名称：“B栏”，
索引：0，
科尔斯：[]
},
]
jQuery.moveColumn=函数（表、从、到）{
var list_th=jQuery（'th'，table）；
for（设i=0；ie.name==list_th[i].textContent.index=i
}
log（“添加实际索引”，新的_表）；
var rows=jQuery（'tr'，table）；
var num_rows=Object.keys（rows）.length-2
console.log（num_行）；
for（设j=0；je.index==k）.cols.push（jQuery（rows[j]）.children（）[k]）
}
jQuery（行[j]）。空（“td”）；
新的表格。forEach（e=>{
jQuery（行[j]）.append（e.cols[j]）
});
}
日志（“添加列”，新的表）；
}
var tbl=jQuery（'table'）；
jQuery.moveColumn（tbl）；

---

例如：

更改列很困难，更改行很容易使用表插件。你应该在这里提供更多细节。您希望允许用户拖放列的顺序吗？你需要多大的灵活性？嗯。。不敲这个答案，但为什么开关的答案正确？我会给我的可重用性的优势。这还不错，只是要知道，如果有合并的单元格（即：rowspan>1），它将不起作用。我对这一个做了一个小的更改，而不是在孩子中使用选择器，它更容易链接。例如，eq（1）。这使得传入参数变得更容易：）与其他解决方案一样，用普通javascript编写的等效代码可能就足够了，但它对合并单元格不起作用（即rowspan>1）尝试过它，在尝试执行tbl时不起作用，0,6（将第一列移到最后一位）。相反，我不得不做1,0=>2,1=>3,2。。。6,5要将第一列放在最后一列，请修改代码以允许将列移动到最后一列。请参阅：尝试此操作后，它实际上只切换单元格的内容，而不切换列本身。如果td元素对其中包含的内容很重要，那么这就不起作用。不过，如果您没有这些要求，则该概念可以工作。如果列上有

width

属性或其他样式属性，则移动列的内容就不那么聪明了。你的结果是宽栏要窄得多，反之亦然。有用答案+1。为我工作