JavaScript 如何对表格中的行进行排序

我们不能使用JavaScript内置的sort()方法来根据特定的列对表的行进行排序。因此，我们需要创建一个自定义算法来对表的行进行排序。在本教程中，我们将学习如何使用JavaScript对表格和行进行排序。

在这里，我们将看看不同的例子，以升序和降序对表行进行排序。

语法

用户可以按照下面的语法来使用JavaScript对表格中的行进行排序。

var switchContinue = true;
while (switchContinue) {
   switchContinue = false;
   var allRows = table.rows;
   for ( Iterate through all rows ) {
      if (first.innerHTML > second.innerHTML) {
         allRows[i].parentNode.insertBefore(allRows[i + 1], allRows[i]);
         switchContinue = true;
         break;
      }
   }
}

操作步骤

按照下面的步骤，使用JavaScript对表格中的行进行排序。

第1步 - 创建一个switchContinue变量并初始化为真值，它可以跟踪表格中的行是否需要进一步切换。

第2步 - 使用while循环，并进行迭代，直到switchContinue变量的值为真。

第3 步–在while循环中，通过假设不需要进一步的切换，将false赋给switchContinue变量。

第4步 --使用rows属性获取表格的所有行。

第4.1 步–获取两行的特定列，并将其分别存储在第一和第二变量中。

第 5步 --获取列的innerHTML并进行比较。如果切换需要基于两个值的比较结果，则切换两个行。

第6步 --给switchContinue变量分配一个真值。由于我们已经切换了两行，我们需要检查是否有其他行需要切换。之后，使用break关键字中断for循环。

第7步 - 如果switchContinue变量的值在for循环的每一次迭代中都是假的，那么数组就被排序了，并且不需要再进行while循环的迭代。

例子

在下面的例子中，我们已经创建了一个有两列名字的表，分别是姓名和工资。此外，我们还在表中添加了五条具有不同列值的行。

在JavaScript部分，我们实现了上述算法，根据升序或工资值对表内的行进行排序。用户可以看到我们如何访问两行的第二列，并使用parseInt()方法将工资值转换成数字。之后，我们比较了工资值，并改变了表格中的行的顺序。

<html>
<body>
   <h2>Sorting the <i>table rows in ascending order</i> in JavaScript.</h2>
   <table id = "sort_table">
      <tr>
         <th> Name </th>
         <th> Salary </th>
      </tr>
      <tr>
         <td> Person 1 </td>
         <td> 40000 </td>
      </tr>
      <tr>
         <td> Person 2 </td>
         <td> 30000 </td>
      </tr>
      <tr>
         <td> Person 3 </td>
         <td> 20000 </td>
      </tr>
      <tr>
         <td> Person 4 </td>
         <td> 50000 </td>
      </tr>
      <tr>
         <td> Person 5 </td>
         <td> 10000 </td>
      </tr>
   </table>
   <button id = "btn"> Sort Table according to salary </button>
   <script>
      let output = document.getElementById('output');
      function sortTableRows() {
         let table = document.getElementById("sort_table");
         var switchContinue = true;

         // continue switching rows until all rows of the table are not sorted
         while (switchContinue) {
            switchContinue = false;
            var allRows = table.rows;
            let i;

            // iterate through all rows and check if the switch requires
            for (i = 1; i < (allRows.length - 1); i++)
            {
               var switchRow = false;

               // get two rows of the table
               let first = allRows[i].getElementsByTagName("TD")[1];
               let second = allRows[i + 1].getElementsByTagName("TD")[1];

               // if the salary in the first row is greater than the second row, we require to switch row
               if (parseInt(first.innerHTML) > parseInt(second.innerHTML)) {
                  switchRow = true;
                  break;
               }
            }

            // switch the row, if required
            if (switchRow) {
               allRows[i].parentNode.insertBefore(allRows[i + 1], allRows[i]);

               // check further if any switch requires
               switchContinue = true;
            }
         }
      }
      let button = document.getElementById('btn');
      button.addEventListener('click', () => { sortTableRows() }) 
   </script>
</body>
</html>

例子

在下面的例子中，表格包含了用户的姓名和年龄。我们根据用户的名字以降序对所有的表行进行排序。我们使用toLowerCase()方法将姓名值转换为小写字母并进行比较。

由于我们要求按降序对表的行进行排序，我们采用了小于运算符来比较两行的列值。

<html>
<body>
   <h2>Sorting the <i>table rows in descending order</i> in JavaScript</h2>
   <table id = "sort_table">
      <tr>
         <th> Name </th>
         <th> Age </th>
      </tr>
      <tr>
         <td> John </td>
         <td> 23 </td>
      </tr>
      <tr>
         <td> Akshay </td>
         <td> 30 </td>
      </tr>
      <tr>
         <td> Alice </td>
         <td> 32 </td>
      </tr>
      <tr>
         <td> Bob </td>
         <td> 12 </td>
      </tr>
      <tr>
         <td> Shubham </td>
         <td> 22 </td>
      </tr>
   </table>
   <button id = "btn"> Sort Table according to Names </button>
   <script>
      let output = document.getElementById('output');
      function sortTableRows() {
         let table = document.getElementById("sort_table");
         var switchContinue = true; 
         while (switchContinue) {
            switchContinue = false;
            var allRows = table.rows;
            let i;
            for (i = 1; i < (allRows.length - 1); i++) {
               var switchRow = false;
               let first = allRows[i].getElementsByTagName("TD")[0];
               let second = allRows[i + 1].getElementsByTagName("TD")[0];
               if (first.innerHTML.toLowerCase() <second.innerHTML.toLowerCase()) {
                  switchRow = true;
                  break;
               }
            }
            if (switchRow) {
               allRows[i].parentNode.insertBefore(allRows[i + 1], allRows[i]);
               switchContinue = true;
            }
         }
      }
      let button = document.getElementById('btn');
      button.addEventListener('click', () => { sortTableRows() })
   </script>
</body>
</html>