在 HTML table 布局中重新定位列及其内容

Relocating a column and its Contents in HTML table layout

我正在为报告 UI、

使用 table

就会这样

现在,我正在改变它,我可以重新排列 table 的列,这样我就可以轻松地制作新的重新排列的报告。

喜欢:

我已经用Jquery draggable 和 sortable 完成了 table header。但是不知道如何用 header.

重新定位相应的列

请帮忙。

您需要从 <thead> 中获取该列的索引并将移动应用到 tbody 中的所有列。

有许多可用的插件 - 请参阅 google https://www.google.co.uk/search?q=jquery+ui+draggable+column 以获得类似

的结果

akottr 使用一种方法将 css class 附加到您要拖动的列,获取该列的索引,找到该索引的元素(thtb.find('> tr > td:nth-child(' + i + ')'),然后将原始索引与要将列移动到的位置进行比较(参见函数_bubbleCols) 然后使用一个名为 swapNodes 的函数将所选列与新位置的列交换。

有一些巧妙的事情,例如异步重新安排 table、处理内部 tables、firefox 修复、对(不)支持的 msie 行为的评论等