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

【问题标题】：Re-ordering the columns in a HTML Table using jquery使用 jquery 重新排序 HTML 表中的列
【发布时间】：2014-04-04 13:05:24
【问题描述】：

this fiddle 中有一个 html 表，它被创建为

<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, Nov 2013, Dec 2013, Jan 2014, Feb 2014, Mar 2014, Total 此外，月份列由服务器根据日期选择动态生成（From 和 To 日期）

【问题讨论】：

为什么不在服务器上对数据进行排序呢？
我建议您在用于检索数据的查询中使用ORDER BY ！如果客户端有任何 JS 负载，这将减少 JS 负载！
@undefined - 我在服务器端对数据进行了排序。但在客户端，它按字母顺序排列。即喜欢Dec 2013Feb 2014等。

标签： javascript jquery html-table

【解决方案1】：

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/

【讨论】：