jQuery re-ordering table columns

Question

I've found various solutions that work for rows, and various solutions that work for plain-table columns, but I need a solution that allows me to drag/drop the headers of columns where colspan>1.

For example:

<table id="myTable">
<thead>
  <tr>
    <th>A1</th>
    <th colspan=2>A2</th>
    <th>A4</th>
    <th>A5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>B1</td><td>B2</td><td>B3</td><td>B4</td><td>B5</td>
  </tr>
  <tr>
    <td>C1</td><td>C2</td><td>C3</td><td>C4</td><td>C5</td>
  </tr> 
</tbody>
</table>

I need to be able to re-order the columns and have B2/B3 and C2/C3 get moved when I drag/drop A2 to a different spot in the header.

Answer 1

I agree with Sinetheta, it sounds like a complex solution to a problem which could probably be easily solved be using a free jQuery plugin - which will do the hard work for you!!!

http://www.jquery4u.com/plugins/30-amazing-jquery-tables/

Answer 2

There are lot of jquery plugins that provision of drag and drop of table. as the problem complex for col-span more than one, check the link below. here is JS FIDDLE

https://goo.gl/GSZ9Rs

there are four external resources added. for a reference plugin : https://akottr.github.io/dragtable/