將HTML表格按兩列排序

Question

我在表格中有幾列，如需要在我的HTML頁面中顯示的A，B，C，D和E列。在一些頁面中，我需要僅基於頁面的一列顯示排序結果，例如表格第三列的「C」列。我能夠做到這一點使用下面的代碼：

function Ascending(a, b) { 
    if (a < b) return -1; 
    if (a > b) return 1; 
    return 0; 
} 
var rows = $('#table tr').not(':first').get(); 
$('#table tr').slice(1).remove(); 
rows.sort(function(rowA, rowB) { 
    var keyA = $(rowA).children('td').eq(2).text().toUpperCase(); 
    var keyB = $(rowB).children('td').eq(2).text().toUpperCase(); 
    return Ascending(keyA, keyB); 
}); 

但我有另一項要求，其中我需要證明基於兩列排序的結果即基於C列在上述情況下的排序，列的結果E也應該被分類。例如：

之前排序：

Column C Column E 
1   Apple 
1   Box 
2   Answer 
2   Axe 
2   Box 
2   Dog 
2   Fish 
2   Goat 
6   Year 
7   Apple 
7   Box 
7   Cat 

：

Column C Column E 
1   Box 
1   Apple 
2   Dog 
2   Fish 
2   Box 
2   Axe 
2   Goat 
2   Answer 
6   Year 
7   Box 
7   Apple 
7   Cat 

排序列C然後E列後：

Column C Column E 
2   Fish 
1   Box 
7   Cat 
2   Dog 
1   Apple 
2   Box 
2   Axe 
7   Box 
2   Answer 
7   Apple 
6   Year 
2   Goat 

排序列C僅後

我無法實施。我該怎麼做？

Answer 1

要通過多列排序你寫的比較函數是這樣的：

（比較函數傳遞兩個「行」）

1. 比較行1列1行2列1
   • 如果它們不同則返回結果（一個霧化+ ve或-ve數）
2. 比較行1列2行2列2
   • 如果它們不同則返回結果（一個霧化+ ve或-ve數）
3. 重複用於其餘列
4. 返回0

的以下示例顯示如何編寫按兩列排序的比較函數。可以使用循環或遞歸排序n列。

$(function() { 
 
    function sortByColumn3(row1, row2) { 
 
    var v1, v2; 
 
    v1 = $(row1).find("td:eq(2)").text(); 
 
    v2 = $(row2).find("td:eq(2)").text(); 
 
    // for numbers you can simply return a-b instead of checking greater/smaller/equal 
 
    return v1 - v2; 
 
    } 
 

 
    function sortByColumn3And5(row1, row2) { 
 
    var v1, v2, r; 
 
    v1 = $(row1).find("td:eq(2)").text(); 
 
    v2 = $(row2).find("td:eq(2)").text(); 
 
    r = v1 - v2; 
 
    if (r === 0) { 
 
     // we have a tie in column 1 values, compare column 2 instead 
 
     v1 = $(row1).find("td:eq(4)").text(); 
 
     v2 = $(row2).find("td:eq(4)").text(); 
 
     if (v1 < v2) { 
 
     r = -1; 
 
     } else if (v1 > v2) { 
 
     r = 1; 
 
     } else { 
 
     r = 0; 
 
     } 
 
    } 
 
    return r; 
 
    } 
 
    $("#button1, #button2").on("click", function() { 
 
    var rows = $("#table1 tbody tr").detach().get(); 
 
    switch (this.id) { 
 
     case "button1": 
 
     rows.sort(sortByColumn3); 
 
     break; 
 
     case "button2": 
 
     rows.sort(sortByColumn3And5); 
 
     break; 
 
    } 
 
    $("#table1 tbody").append(rows); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input type="button" id="button1" value="sortByColumn3"> 
 
<input type="button" id="button2" value="sortByColumn3And5"> 
 

 
<table id="table1" border="1" width="100%"> 
 
    <thead> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>x</td> 
 
     <td>y</td> 
 
     <td>2</td> 
 
     <td>z</td> 
 
     <td>Fish</td> 
 
    </tr> 
 
    <tr> 
 
     <td>y</td> 
 
     <td>z</td> 
 
     <td>1</td> 
 
     <td>x</td> 
 
     <td>Box</td> 
 
    </tr> 
 
    <tr> 
 
     <td>z</td> 
 
     <td>x</td> 
 
     <td>7</td> 
 
     <td>y</td> 
 
     <td>Cat</td> 
 
    </tr> 
 
    <tr> 
 
     <td>x</td> 
 
     <td>y</td> 
 
     <td>2</td> 
 
     <td>z</td> 
 
     <td>Dog</td> 
 
    </tr> 
 
    <tr> 
 
     <td>y</td> 
 
     <td>z</td> 
 
     <td>1</td> 
 
     <td>x</td> 
 
     <td>Apple</td> 
 
    </tr> 
 
    <tr> 
 
     <td>z</td> 
 
     <td>x</td> 
 
     <td>2</td> 
 
     <td>y</td> 
 
     <td>Box</td> 
 
    </tr> 
 
    <tr> 
 
     <td>x</td> 
 
     <td>y</td> 
 
     <td>2</td> 
 
     <td>z</td> 
 
     <td>Axe</td> 
 
    </tr> 
 
    <tr> 
 
     <td>y</td> 
 
     <td>z</td> 
 
     <td>7</td> 
 
     <td>x</td> 
 
     <td>Box</td> 
 
    </tr> 
 
    <tr> 
 
     <td>z</td> 
 
     <td>x</td> 
 
     <td>2</td> 
 
     <td>y</td> 
 
     <td>Answer</td> 
 
    </tr> 
 
    <tr> 
 
     <td>x</td> 
 
     <td>y</td> 
 
     <td>7</td> 
 
     <td>z</td> 
 
     <td>Apple</td> 
 
    </tr> 
 
    <tr> 
 
     <td>y</td> 
 
     <td>z</td> 
 
     <td>6</td> 
 
     <td>x</td> 
 
     <td>Year</td> 
 
    </tr> 
 
    <tr> 
 
     <td>z</td> 
 
     <td>x</td> 
 
     <td>2</td> 
 
     <td>y</td> 
 
     <td>Goat</td> 
 
    </tr> 
 
    </tbody> 
 
</table>