当我尝试根据第一列中的内容对表格进行排序时遇到问题。我的代码与此 ANSWER 中的代码几乎相同但不幸的是，就我而言，它不起作用。正如您所看到的，运行代码片段时，表格未正确排序。
$('.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 Apr 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 Apr 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 Apr 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 May 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 May 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 Jun 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 Jun 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 Jun 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 Jun 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 Jun x</td>
<td align="right">x.x€</td>
<td align="right">x.x€</td>
<td>SAV/NachLieferung GLASLEISTE ELx</td>
</tr>
<tr>
<td>MURIC & FILS SARL</td>
<td></td>
<td>x</td>
<td>x Jun 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 Jul 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 Jul 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 Jul 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 Jul x</td>
<td align="right">x.x€</td>
<td align="right">x.x€</td>
<td>SAV - DOMMELDANGE - KRAMER</td>
</tr>
</tbody>
</table>最佳答案
您需要添加另一个条件来检查排序
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 Apr 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 Apr 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 Apr 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 May 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 May 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 Jun 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 Jun 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 Jun 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 Jun 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 Jun x</td>
<td align="right">x.x€</td>
<td align="right">x.x€</td>
<td>SAV/NachLieferung GLASLEISTE ELx</td>
</tr>
<tr>
<td>MURIC & FILS SARL</td>
<td></td>
<td>x</td>
<td>x Jun 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 Jul 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 Jul 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 Jul 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 Jul x</td>
<td align="right">x.x€</td>
<td align="right">x.x€</td>
<td>SAV - DOMMELDANGE - KRAMER</td>
</tr>
</tbody>
</table>关于javascript - 使用 JavaScript 和 jQuery 进行表格排序的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28049466/