使用jquery重新排序HTML表中的列

问题描述：

这个小提琴中有一个html表，其创建为

There is a html table in this fiddle which is created as

<table width="100%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>Sl.No</th>
        <th>Name</th>
        <th>Dec 2013</th>
        <th>Feb 2014</th>
        <th>Jan 2014</th>
        <th>Mar 2014</th>
        <th>Nov 2013</th>
        <th>Total</th>
    </tr>
    <tr>
        <td>1</td>
        <td>foo</td>
        <td>4</td>
        <td>7</td>
        <td>3</td>
        <td>5</td>
        <td>2</td>
        <td>21</td>
    </tr>
    <tr>
        <td>2</td>
        <td>bar</td>
        <td>6</td>
        <td>1</td>
        <td>5</td>
        <td>8</td>
        <td>3</td>
        <td>23</td>
    </tr>
</table>

如何使用jquery重新排序列，以便新表中列的顺序变为 Sl.No，Name，2013年11月，2013年12月，2014年1月，2014年2月，2014年3月，总计月份列也是由服务器根据日期选择动态生成的（从和到日期）

How to re-order the columns using jquery so that the order of the columns in new table becomes Sl.No, Name, Nov 2013, Dec 2013, Jan 2014, Feb 2014, Mar 2014, Total Also the month columns are generated dynamically by server based on date selection (From and To dates)

答

var arr = $('th').sort(function(a, b) {
   return new Date(a.innerHTML) > new Date(b.innerHTML);
}).map(function() { return this.cellIndex }).get();

$('tr').each(function() {
    $(this.cells).sort(function(a, b) {
        a = $.inArray(a.cellIndex, arr);
        b = $.inArray(b.cellIndex, arr);
        return a > b;
    }).prependTo(this);
});

http://jsfiddle.net/ZR5W7/

使用jquery重新排序HTML表中的列

相关推荐