Question

当我点击按钮时，我想根据标题值更改列位置。即，我想根据标头值对表列位置进行排序。标头值是日期。在jquery中有任何简单的解决方案吗？或任何人提到任何其他解决方案。

HTML

<table class="table table-bordered table-sm" id="tutorial">
<tbody>
<tr id="time_date">

<th>HE</th><th class="remove_head6">2018-05-23</th><th class="remove_head-65" >2018-05-23</th><th class="remove_head-54" >2018-05-24</th><th class="remove_head-91" >2018-05-25</th><th class="remove_head22" >2018-06-01</th><th class="remove_head9" >2018-05-30</th></tr>
     <tr id="tr7">

                    <td>7</td>

    <td class="valid_cls remove_head6" >23.4</td><td class="remove_head-65">&nbsp;</td><td class="valid_cls remove_head-54">23.4</td><td class="valid_cls remove_head-91">23.4</td><td class="valid_cls remove_head22" >23.4</td><td class="valid_cls remove_head9" >23.4</td></tr> 
                 <tr id="tr8">

                    <td>8</td>

    <td class="valid_cls remove_head6" >-20</td><td class="valid_cls remove_head-65" >23.4</td><td class="valid_cls remove_head-54" >-20</td><td class="valid_cls remove_head-91" >-20</td><td class="valid_cls remove_head22" >-20</td><td class="valid_cls remove_head9" >-20</td></tr> 
                 <tr id="tr9">



 </tbody></table>

Answer 1

你可以这样做：

var headers = $( '#time_date th' ).map( function ( i ) {
    if ( i > 0 ) return { index: i, value: $( this ).html() };
} ).sort( function ( a, b ) {
    return a.value > b.value ? 1 : a.value == b.value ? 0 : -1
} ).get()

function sortHeader () {
    $( 'tr' ).each( function ( i ) {
        if ( i == 0 ) {
            $( this ).children( 'th' ).each( function ( i ) {
                if ( i > 0 ) $( this ).html( headers[ i - 1 ].value )
            } )
        } else {
            var temp = [], temp2 = [];

            $( this ).each( function () {
                temp = $( this ).children( 'td' ).toArray();

                for ( var i = 0; i < temp.length; i++ ) {
                    if ( i == 0 )
                        temp2.push( temp[ 0 ] )
                    else
                        temp2.push( temp[ headers[ i - 1 ].index ] )
                }
            } );

            $( this ).html( temp2 )
        }
    } )
}

table {
    font-family: "Trebuchet MS", Arial;
    border-collapse: collapse;
    text-align: center;
    width: 100%
}
td, th {
    border: 1px solid #ddd;
    padding: 8px
}
tr:nth-child( even ){
    background-color: #f2f2f2
}
tr:hover {
    background-color: #ddd
}
th {
    padding: 15px 0;
    background-color: #87bdd8;
    color: white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
    <button type="button" onclick="sortHeader()">Change Header Position</button>
</p>
<table class="table table-bordered table-sm" id="tutorial">
    <tbody>
        <tr id="time_date">
            <th>HE</th>
            <th class="remove_head6">2018-05-23<br>column 1</th>
            <th class="remove_head-91" >2018-05-25<br>column 2</th>
            <th class="remove_head-65" >2018-05-23<br>column 3</th>
            <th class="remove_head-54" >2018-05-24<br>column 4</th>
            <th class="remove_head22" >2018-06-01<br>column 5</th>
            <th class="remove_head9" >2018-05-30<br>column 6</th>
        </tr>
        <tr id="tr7">
            <td>7</td>
            <td class="valid_cls remove_head6" >column 1</td>
            <td class="valid_cls remove_head-91">column 2</td>
            <td class="remove_head-65">column 3</td>
            <td class="valid_cls remove_head-54">column 4</td>
            <td class="valid_cls remove_head22" >column 5</td>
            <td class="valid_cls remove_head9" >column 6</td>
        </tr>
        <tr id="tr8">
            <td>8</td>
            <td class="valid_cls remove_head6" >column 1</td>
            <td class="valid_cls remove_head-91" >column 2</td>
            <td class="valid_cls remove_head-65" >column 3</td>
            <td class="valid_cls remove_head-54" >column 4</td>
            <td class="valid_cls remove_head22" >column 5</td>
            <td class="valid_cls remove_head9" >column 6</td>
        </tr>
        <tr id="tr9">
            <td>9</td>
            <td class="valid_cls remove_head6" >column 1</td>
            <td class="valid_cls remove_head-91">column 2</td>
            <td class="remove_head-65">column 3</td>
            <td class="valid_cls remove_head-54">column 4</td>
            <td class="valid_cls remove_head22" >column 5</td>
            <td class="valid_cls remove_head9" >column 6</td>
        </tr>
        <tr id="tr10">
            <td>10</td>
            <td class="valid_cls remove_head6" >column 1</td>
            <td class="valid_cls remove_head-91">column 2</td>
            <td class="remove_head-65">column 3</td>
            <td class="valid_cls remove_head-54">column 4</td>
            <td class="valid_cls remove_head22" >column 5</td>
            <td class="valid_cls remove_head9" >column 6</td>
        </tr>
     </tbody>
</table>

Jquery根据标头值更改列位置

1 个答案: