How to use JavaScript to implement table sorting function?

How to use JavaScript to implement table sorting function?

In modern web development, tables are one of the common ways to display data. Sorting tables is an important function that can help users quickly find relevant data. In this article, we will learn how to implement table sorting functionality using JavaScript and provide specific code examples.

1. Preparation

First, we need a table containing data. Suppose our table has three columns, namely "Name", "Age" and "City". The code to create a table in HTML is as follows:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>广州</td>
    </tr>
    <!-- 更多的数据行... -->
  </tbody>
</table>

2. Implement table sorting

Next, we will use JavaScript to implement the table sorting function.

First, we need to get the reference to the table. We can use the getElementById method to get the table element.

var table = document.getElementById("myTable");

Then, we need to add a click event to each column of the table. When the user clicks on the header of a column, the sorting function will be triggered.

var th = table.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
  th[i].addEventListener("click", function() {
    sortTable(table, i);
  });
}

Next, let us implement the sorting function sortTable. This function will receive two parameters, one is the table element and the other is the index of the column to be sorted.

function sortTable(table, column) {
  var rows = Array.from(table.getElementsByTagName("tr"));

  rows.sort(function(a, b) {
    var cellA = a.getElementsByTagName("td")[column];
    var cellB = b.getElementsByTagName("td")[column];

    var valueA = cellA.innerText || cellA.textContent;
    var valueB = cellB.innerText || cellB.textContent;

    if (valueA < valueB) {
      return -1;
    } else if (valueA > valueB) {
      return 1;
    } else {
      return 0;
    }
  });

  for (var i = 0; i < rows.length; i++) {
    table.appendChild(rows[i]);
  }
}

In this sorting function, we first use the Array.from method to convert the table rows of type HTMLCollection into an array. Then, we use the sort method to sort the array. The sorting operation uses the innerText or textContent attribute to obtain the text content of the table cell and compare it. Finally, we add the sorted rows back into the table to complete the sorting.

3. Complete sample code

The following is the complete sample code:

  
  <script>
    function sortTable(table, column) {
      var rows = Array.from(table.getElementsByTagName("tr"));

      rows.sort(function(a, b) {
        var cellA = a.getElementsByTagName("td")[column];
        var cellB = b.getElementsByTagName("td")[column];

        var valueA = cellA.innerText || cellA.textContent;
        var valueB = cellB.innerText || cellB.textContent;

        if (valueA < valueB) {
          return -1;
        } else if (valueA > valueB) {
          return 1;
        } else {
          return 0;
        }
      });

      for (var i = 0; i < rows.length; i++) {
        table.appendChild(rows[i]);
      }
    }

    window.onload = function() {
      var table = document.getElementById(&quot;myTable&quot;);
      var th = table.getElementsByTagName("th");
      for (var i = 0; i < th.length; i++) {
        th[i].addEventListener("click", function() {
          sortTable(table, i);
        });
      }
    };
  </script>


  

    

      

        
姓名
        
年龄
        
城市
      
    
    

      

        
张三
        
25
        
北京
      
      

        
李四
        
30
        
上海
      
      

        
王五
        
22
        
广州
      
      
    
  

4. Conclusion

Through the above code examples, we have learned How to use JavaScript to implement table sorting function. By adding a click event to the header of the table and calling the sorting function in the event handler, we can implement the function of sorting according to different columns. In this way, users can easily sort the table to find target data faster. I hope this article is helpful to you, thank you for reading!

The above is the detailed content of How to use JavaScript to implement table sorting function?. For more information, please follow other related articles on the PHP Chinese website!