如何使用 JavaScript 对表中的行进行排序？

由于 JavaScript 不提供任何内置函数来对表格进行排序，因此我们将需要使用本机方法对给定的表格进行排序。我们将研究本文中的方法。

方法：
以下两个示例都将使用基本算法和类似方法。循环程序对元素进行切换和排序，直到排序完毕。

// executes on action like button click
Function() {   
   // main loop that runs until table is sorted
   While (condition = true) {   
      // runs for all rows
      for (i = 1; i < row.length; i++ ) {   
         // check if switch is required
         if (element_A > element_B){   
            // perform switch
            PerformSwitch();   
         }
      }
   }
}

示例 1：本示例使用while循环对表进行排序以切换行，直到对行进行排序。

  

    GeeksforGeeks
    
        table {
            border-spacing: 0;
            width: 80%;
            border: 1px solid #dddd;
        }
          
        th,
        td {
            text-align: left;
            padding: 15px;
        }
          
        tr:nth-child(even) {
            background-color: #008000
        }
    

  

  
    
        GeeksforGeeks
        
            Sort
        
  
        
            
                
                
            
            
                
                
            
            
                
                
            
            
                
                
            
            
                
                
            
  
        CountryCapitalUnited states of AmericaWashington DCIndiaNew DelhiAustraliaCanberraGermanyBerlin
  
        
            // JavaScript Program to illustrate
            // Table sort on a button click
            function sortTable() {
                var table, i, x, y;
                table = document.getElementById("table");
                var switching = true;
  
                // Run loop until no switching is needed
                while (switching) {
                    switching = false;
                    var rows = table.rows;
  
                    // Loop to go through all rows
                    for (i = 1; i < (rows.length - 1); i++) {
                        var Switch = false;
  
                        // Fetch 2 elements that need to be compared
                        x = rows[i].getElementsByTagName("TD")[0];
                        y = rows[i + 1].getElementsByTagName("TD")[0];
  
                        // Check if 2 rows need to be switched
                        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase())
                            {
  
                            // If yes, mark Switch as needed and break loop
                            Switch = true;
                            break;
                        }
                    }
                    if (Switch) {
                        // Function to switch rows and mark switch as completed
                        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                        switching = true;
                    }
                }
            }
        
    

  

点击前输出：

点击后输出：

示例 2：此示例使用相同的循环技术对表进行排序，但对给定的列以及两个方向（升序和降序）都执行该函数。

  

    GeeksforGeeks
    
        table {
            border-spacing: 0;
            width: 80%;
            border: 1px solid #dddd;
        }
          
        th,
        td {
            text-align: left;
            padding: 15px;
        }
          
        tr:nth-child(even) {
            background-color: #008000
        }
    

  

    
        
          GeeksforGeeks
      
  
        
          Click the headers to sort in 
          ascending and descending.
          
  
        
            
                
                
                
            
            
                
                
            
            
                
                
            
            
                
                
            
            
                
                
            
        CountryCapitalUnited states of AmericaWashington DCIndiaNew DelhiAustraliaCanberraGermanyBerlin
  
        
            // JavaScript program to illustrate
            // Table sort for both columns and both directions.
            function sortTable(n) {
                var table;
                table = document.getElementById("table");
                var rows, i, x, y, count = 0;
                var switching = true;
  
                // Order is set as ascending
                var direction = "ascending";
  
                // Run loop until no switching is needed
                while (switching) {
                    switching = false;
                    var rows = table.rows;
  
                    //Loop to go through all rows
                    for (i = 1; i < (rows.length - 1); i++) {
                        var Switch = false;
  
                        // Fetch 2 elements that need to be compared
                        x = rows[i].getElementsByTagName("TD")[n];
                        y = rows[i + 1].getElementsByTagName("TD")[n];
  
                        // Check the direction of order
                        if (direction == "ascending") {
  
                            // Check if 2 rows need to be switched
                            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase())
                                {
                                // If yes, mark Switch as needed and break loop
                                Switch = true;
                                break;
                            }
                        } else if (direction == "descending") {
  
                            // Check direction
                            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase())
                                {
                                // If yes, mark Switch as needed and break loop
                                Switch = true;
                                break;
                            }
                        }
                    }
                    if (Switch) {
                        // Function to switch rows and mark switch as completed
                        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                        switching = true;
  
                        // Increase count for each switch
                        count++;
                    } else {
                        // Run while loop again for descending order
                        if (count == 0 && direction == "ascending") {
                            direction = "descending";
                            switching = true;
                        }
                    }
                }
            }
        
    

  

排序前输出

第一列排序的输出（升序）：

第二列排序的输出（降序）：