前端实现表格排序与筛选功能

在前端开发中，经常会遇到需要对表格进行排序和筛选的情况。本文将介绍如何使用前端技术实现表格排序和筛选功能，并通过示例代码进行说明。

表格排序功能

表格排序功能指的是根据表格中某一列的值，对表格的行进行排序。下面是实现表格排序功能的步骤：

1. 获取表格元素并获取待排序的列。
2. 将表格中的行存储在数组中。
3. 使用数组的sort方法对行进行排序，传入一个比较函数用于指定排序规则。
4. 将排序后的行重新添加到表格中。

以下是一个简单的示例代码，实现了对一个包含姓名、年龄和性别的表格按照年龄进行升序排序：

<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>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<script>
  function sortTable() {
    var table = document.getElementById('myTable');
    var rows = Array.from(table.getElementsByTagName('tr')).slice(1); // 剔除表头行
    rows.sort(function(row1, row2) {
      var age1 = parseInt(row1.cells[1].textContent);
      var age2 = parseInt(row2.cells[1].textContent);
      return age1 - age2;
    });
    rows.forEach(function(row) {
      table.tBodies[0].appendChild(row);
    });
  }

  sortTable();
</script>

运行以上代码后，表格将按照年龄从小到大排序。

表格筛选功能

表格筛选功能指的是根据用户输入的关键词，过滤表格中的行。下面是实现表格筛选功能的步骤：

1. 获取输入框元素和表格元素。
2. 监听输入框的input事件，并使用该事件的回调函数，根据输入框中的值对表格进行筛选。
3. 遍历表格中的行，根据行中的文本内容和输入框的值进行匹配。
4. 隐藏不匹配的行，显示匹配的行。

以下是一个简单的示例代码，实现了根据姓名对表格进行筛选的功能：

<input id="filterInput" type="text" placeholder="输入姓名进行筛选">

<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>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<script>
  var filterInput = document.getElementById('filterInput');
  var table = document.getElementById('myTable');

  filterInput.addEventListener('input', function() {
    var filterValue = filterInput.value.toLowerCase();
    Array.from(table.tBodies[0].rows).forEach(function(row) {
      var name = row.cells[0].textContent.toLowerCase();
      if (name.includes(filterValue)) {
        row.style.display = '';
      } else {
        row.style.display = 'none';
      }
    });
  });
</script>

运行以上代码后，当用户输入姓名时，表格将只显示与该姓名匹配的行。

总结

通过前端技术，我们可以方便地实现表格排序和筛选功能。这些功能不仅提升了用户体验，还使得数据的展示和查找更加便捷。希望本文的内容能对你理解和使用前端实现表格排序和筛选功能有所帮助。

本文来自极简博客，作者：蓝色海洋，转载请注明原文链接：前端实现表格排序与筛选功能