javascript 重新排序表列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6759095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Re-order table columns?
提问by Richard
Does anyone know a way to re-order table columns, using jQuery?
有谁知道使用 jQuery 重新排序表列的方法？
I don't mean sort - I mean dynamically move entire columns left or right in a table.
我的意思不是排序 - 我的意思是在表格中向左或向右动态移动整列。
I'm aware of the excellent dragtable plugin, but I don't need something that allows the user to move columns, I need something that will do the re-ordering in a configurable way.
我知道优秀的可拖动插件，但我不需要允许用户移动列的东西，我需要一些可以可配置的方式进行重新排序的东西。
回答by scaryzet
The idea is to walk over all rows (tr's) of the table and swap the desired td's. Let's swap column 2 and column 4:
这个想法是遍历表的所有行 (tr) 并交换所需的 td。让我们交换第 2 列和第 4 列：
$('table tr').each(function() {
var tr = $(this);
var td1 = tr.find('td:eq(1)'); // indices are zero-based here
var td2 = tr.find('td:eq(3)');
td1.detach().insertAfter(td2);
});
I hope this helps.
我希望这有帮助。
回答by Yi?it Yener
This code should work for you.
这段代码应该适合你。
$("table tr").each(function () {
$(this).find("td").eq(1).after($(this).find("td").eq(0));
});
编辑：如果您将 $(this).find("td") 分配给一个变量，这将提供更好的性能。但是上下文归结为单个 tr。所以我认为仅仅给出这个想法就足够了。
$("table tr").each(function () {
var rows = $(this).find("td");
rows.eq(1).after(rows.eq(0));
});
回答by Matt Sach
Reading through the source code of the dragtable plugin, the author mentions that the algorithm for actually moving table columns was born of a discussion on the comp.lang.javascript newsgroup. That discussion is here: Swapping table columns.
通读dragtable插件的源代码，作者提到实际移动表格列的算法诞生于comp.lang.javascript新闻组的讨论。该讨论在这里：交换表列。
In that thread, the OP is not asking about the UI side of reordering, but help with debugging a function he'd already written to swap two columns. Further down the discussion it develops into code that enables you to pass a specific column ordering, and have the code calculate all the necessary swaps/moves to get from the current ordering to the specified ordering.
在该线程中，OP 没有询问重新排序的 UI 方面，而是帮助调试他已经编写的用于交换两列的函数。进一步讨论它发展成代码，使您能够传递特定的列排序，并让代码计算所有必要的交换/移动，以从当前排序到指定排序。
It's not jQuery (most posters on c.l.js have a firm dislike of it and most other JS frameworks), and therefore it's code you can hopefully adapt for your needs and then include anywhere.
它不是 jQuery（大多数关于 cljs 的海报都坚决不喜欢它和大多数其他 JS 框架），因此它是您希望能够适应您的需求然后包含在任何地方的代码。
回答by Phillip Senn
I combined it with jQueryUI to get some great drag and drop action:
我将它与 jQueryUI 结合起来获得了一些很棒的拖放操作：
(function() {
var local = {};
local.containment = 'parent';
local.revert = true;
$('body thead th').draggable(local);
$('body thead th').droppable({
drop: dropZone
});
function dropZone(myEvent, myUI ) {
var head = {};
head.dragIndex = myUI.draggable.index();
head.dropIndex = $(this).index();
head.rows = $(this).closest('thead').find('tr');
head.cellIndex = head.rows.find('th').length-1;
head.rows.each(processTableHeaderRows);
function processTableHeaderRows(index, element) {
var row = {}
row.tr = $(element);
row.drag = row.tr.find('th:eq(' + head.dragIndex + ')');
row.drop = row.tr.find('th:eq(' + head.dropIndex + ')');
if (head.dropIndex === head.cellIndex) {
row.drag.detach().insertAfter(row.drop);
} else {
row.drag.detach().insertBefore(row.drop);
}
}
// Same thing here for td instead of th
$(this).closest('table').find('tbody > tr').each(processRows);
function processRows(index, element) {
var row = {};
row.tr = $(element);
row.drag = row.tr.find('td:eq(' + head.dragIndex + ')');
row.drop = row.tr.find('td:eq(' + head.dropIndex + ')');
if (head.dropIndex === head.cellIndex) {
row.drag.detach().insertAfter(row.drop);
} else {
row.drag.detach().insertBefore(row.drop);
}
}
}
})();
Tried to get it to work in jsFiddle, but I couldn't. Works on my websitethough!
试图让它在jsFiddle 中工作，但我不能。不过可以在我的网站上使用！
