如何在简单HTML表格中排序并仅显示前5条记录？

实现方案 #

以下是基于jQuery的解决方案，无需额外插件，可实现表格记录排序并仅展示前5条数据：

完整代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #dddddd;
    }
  </style>
</head>
<body>
  <table id="mytable">
    <thead>
       <tr>
        <th>日期</th>
        <th>就绪时长</th>
        <th>未就绪时长</th>
      </tr>
    </thead>
    <tbody>
        <tr>
      <td>2019-02-29</td>
      <td>20</td>
      <td>40</td>
    </tr>
    <tr>
      <td>2019-01-31</td>
      <td>20</td>
      <td>40</td>
    </tr>
    <tr>
      <td>2019-03-24</td>
      <td>20</td>
      <td>40</td>
    </tr>
    <tr>
      <td>2019-05-14</td>
      <td>20</td>
      <td>40</td>
    </tr>
    <tr>
      <td>2019-07-26</td>
      <td>20</td>
      <td>40</td>
    </tr>
    <tr>
      <td>2019-08-15</td>
      <td>20</td>
      <td>40</td>
    </tr>
    <tr>
      <td>2019-09-04</td>
      <td>20</td>
      <td>40</td>
    </tr>
    <tr>
      <td>2019-10-19</td>
      <td>20</td>
      <td>40</td>
    </tr>
    <tr>
      <td>2019-11-24</td>
      <td>20</td>
      <td>40</td>
    </tr>
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      // 获取表格所有数据行
      var rows = $('#mytable tbody tr').get();
      
      // 按日期列倒序排序（如需正序，将 return 后的 dateB - dateA 改为 dateA - dateB）
      rows.sort(function(a, b) {
        var dateA = new Date($(a).find('td').eq(0).text());
        var dateB = new Date($(b).find('td').eq(0).text());
        return dateB - dateA;
      });

      // 清空原有内容，插入排序后的前5条记录
      $('#mytable tbody').empty();
      for(var i = 0; i < Math.min(5, rows.length); i++) {
        $('#mytable tbody').append(rows[i]);
      }
    });
  </script>
</body>
</html>

自定义说明 #

1. 切换排序字段：如果需要按“就绪时长”或“未就绪时长”排序，只需修改排序逻辑中的列索引和数据类型，例如按就绪时长降序：

   rows.sort(function(a, b) {
     var valA = parseInt($(a).find('td').eq(1).text());
     var valB = parseInt($(b).find('td').eq(1).text());
     return valB - valA;
   });
   

2. 排序方向：将排序函数中的dateB - dateA或valB - valA调换顺序，即可切换为升序排序。
3. 兼容少数据场景：Math.min(5, rows.length)确保当表格记录不足5条时，不会出现索引越界问题。

内容的提问来源于stack exchange，提问作者Ganesh Putta