搬遷列及其在HTML表格佈局內容

Question

我使用的是表報告UI，

它會是這樣

現在，我改變了它像，我可以重新整理表格的列，以便輕鬆製作新的重新排列的報告。

像：

我已經做了與jQuery可拖動和排序表頭。但不知道如何將相應的列與標題重新定位。

請幫忙。

Answer 1

您需要從<thead>獲取該列的索引，並將該移動應用於tbody中的所有列。

有許多可用的插件 - 看到谷歌https://www.google.co.uk/search?q=jquery+ui+draggable+column得到像

• http://akottr.github.io/dragtable/（IE7 +）的結果也見http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Draggable-Table-Columns-Dragtable/
• 年長SO質疑Drag and drop sorting of table columns with jQuery
• 回答上面列出了兩個akkotr的SO問題dragtable.js和http://jebaird.com/demos/dragtable/作爲示例（從akottr's dragtable分叉）。

akottr使用了附加一個CSS類你想拖動列的方法，獲取指數爲列，認定元素此索引（與thtb.find('> tr > td:nth-child(' + i + ')')，那麼原來的指數與在那裏你比較要移動的列（見函數_bubbleCols） 這則採用了一種名爲swapNodes功能交換與在新位置的列選擇列。

有像異步一些聰明的事情重新安排表的時候，與內表，火狐修復，評論（未）支持msie行爲等