HTML中table根据表头的拖动，改变列的排序，非行的排序

由原来的这样的样式，变为这样的：

 

原来的5列到了第三列；

需要引入俩个js：

1.drag.js

2.jquery-1.1-0.2.js；

html：

<div id="main">
        <table id="headTable" border="1" cellpadding="0" cellspacing="0" style="width:400px;text-align:center;">
            <tr style="background-color: #E5E5E5">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
        <table id="mainTable" border="1" cellpadding="0" cellspacing="0" style="width:400px;text-align:center;">
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td><div style="color:red;">ten<span style="display:none">123</span></div>10</td>
            </tr>
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td><div style="color:red;">ten<span style="display:none">123</span></div>10</td>
            </tr>
            <tr>
                <td>61</td>
                <td>71</td>
                <td>81</td>
                <td>91</td>
                <td><div style="color:red;">ten<span style="display:none">123</span></div>101</td>
            </tr>
        </table>
        <div id="info"></div>
        <div id="triangle">
            <div class="arrow arrow-down"></div>
            <div class="arrow arrow-up"></div>
        </div>
    </div>

必须是俩个table来实现，表头一个table，表内容一个table，然后样式最好自己写一样的，否则很麻烦，最好把列宽搞好，否则绝对是个问题。代码是从别人那里拷来的。分享一下；