使用jquery重新排序HTML表中的列 [英] Re-ordering the columns in a HTML Table using jquery

问题描述

这个小提琴中有一个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表中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！