使用 JavaScript 和 jQuery 进行表格排序的问题答案

【问题标题】：Issue with table sorting using JavaScript and jQuery使用 JavaScript 和 jQuery 进行表格排序的问题
【发布时间】：2015-01-21 00:00:53
【问题描述】：

我在尝试根据第一列中的内容对表格进行排序时遇到问题。我的代码与ANSWER 中的代码几乎相同，但不幸的是，就我而言，它不起作用。如您所见，运行 sn -p 表未正确排序。

$('.sort-table').click(function(e) {
    e.preventDefault();                        // prevent default button click behaviour

    var sortAsc = $(this).hasClass('asc'),     // ASC or DESC
        $table  = $('#sort-table'),            // cache the target table DOM element
        $rows   = $('tbody > tr', $table);     // cache all rows from the target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).eq(0).text().trim();
        var keyB = $('td',b).eq(0).text().trim();
        
        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;     // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;     // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                    // append rows after sort
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>
<table id="sort-table" border="1">
    <tbody>
        <tr>
            <td>MOSELLE CONSTRUCTION ET FAÇADE SA</td>
            <td>xc</td>
            <td>xa</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>CHANTIER ECH SUR ALZETTE-STORE A " Z "</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td>xd</td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>ANTONIO GEORGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SATRAP DIFF PHASE x - x</td>
        </tr>
        <tr>
            <td>DE OLIVEIRA SANTOS - CWIEK CRISTOVAO ET IWONA</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>idem</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>FERNANDO - RODANGE</td>
        </tr>
        <tr>
            <td>DEMAY SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>IDEM</td>
        </tr>
        <tr>
            <td>BETRA SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LOT x RIES-WEISS (KAHLER)</td>
        </tr>
        <tr>
            <td>BER CREATION</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>BOUSSE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/ULx SEUIL MANQUANT</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/NachLieferung GLASLEISTE ELx</td>
        </tr>
        <tr>
            <td>MURIC &amp; FILS SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>x TELECOMMANDES</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>APP x DOMELDANGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LIMPERSBERG HS - GLAS</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - BETTANGE-REDING</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - DOMMELDANGE - KRAMER</td>
        </tr>
    </tbody>
</table>

【问题讨论】：

标签： javascript jquery html sorting

【解决方案1】：

您需要添加另一个条件来检查您的排序

    if (sortAsc) {
        // if a > b return 1 / if a < b return -1 / else same so return 0
        return (keyA > keyB) ? 1 : (keyA < keyB) ? -1 : 0;     // A bigger than B, sorting ascending
    } else {
        // if a < b return 1 / if a > b return -1 / else same so return 0
        return (keyA < keyB) ? 1 : (keyA > keyB) ? -1 : 0;     // B bigger than A, sorting descending
    }

另外，也不需要在末尾循环来追加行 - 你可以这样做

$table.find('tbody').append($rows);  // no need to loop through to append

$('.sort-table').click(function(e) {
    e.preventDefault();                        // prevent default button click behaviour

    var sortAsc = $(this).hasClass('asc'),     // ASC or DESC
        $table  = $('#sort-table'),            // cache the target table DOM element
        $rows   = $('tbody > tr', $table);     // cache all rows from the target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).eq(0).text().trim();
        var keyB = $('td',b).eq(0).text().trim();
        
        if (sortAsc) {
            return (keyA > keyB) ? 1 : (keyA < keyB) ? -1 : 0;     // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : (keyA > keyB) ? -1 : 0;     // B bigger than A, sorting descending
        }
    });
    $table.find('tbody').append($rows);  // no need to loop through to append  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>
<table id="sort-table" border="1">
    <tbody>
        <tr>
            <td>MOSELLE CONSTRUCTION ET FAÇADE SA</td>
            <td>xc</td>
            <td>xa</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>CHANTIER ECH SUR ALZETTE-STORE A " Z "</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td>xd</td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>ANTONIO GEORGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SATRAP DIFF PHASE x - x</td>
        </tr>
        <tr>
            <td>DE OLIVEIRA SANTOS - CWIEK CRISTOVAO ET IWONA</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>idem</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>FERNANDO - RODANGE</td>
        </tr>
        <tr>
            <td>DEMAY SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>IDEM</td>
        </tr>
        <tr>
            <td>BETRA SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LOT x RIES-WEISS (KAHLER)</td>
        </tr>
        <tr>
            <td>BER CREATION</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>BOUSSE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/ULx SEUIL MANQUANT</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/NachLieferung GLASLEISTE ELx</td>
        </tr>
        <tr>
            <td>MURIC &amp; FILS SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>x TELECOMMANDES</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>APP x DOMELDANGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LIMPERSBERG HS - GLAS</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - BETTANGE-REDING</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - DOMMELDANGE - KRAMER</td>
        </tr>
    </tbody>
</table>

【讨论】：