HTML中的表格排序和过滤

翻滚的胖子
2023-06-07 14:56:30
前端技术
HTML CSS JavaScript

在HTML中，表格是经常使用的元素之一，而表格的排序和过滤也是我们日常开发中常见的需求。本文将为大家介绍如何使用函数来实现表格的排序和过滤。

排序

对表格进行排序，最常用的方法是通过JavaScript来实现。在代码中，我们需要使用sort()函数来对表格数据进行排序。

sort()函数的语法格式如下：

array.sort(sortFunction)

其中，sortFunction是排序函数，它决定了数组的排序规则。例如，我们可以按照数字大小、字母顺序、时间先后等规则进行排序。

下面是一个示例代码：

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

在本代码中，我们使用了sortTable(n)函数来对表格进行排序，其中n表示要排序的列数。该函数通过获取表格中的数据并对其进行排序，最后将结果显示在表格中。

过滤

表格过滤的实现方式也可以通过JavaScript来实现。在代码中，我们需要使用filter()函数来对表格数据进行过滤。

filter()函数的语法格式如下：

array.filter(filterFunction)

其中，filterFunction是过滤函数，它决定了数组的过滤规则。例如，我们可以按照关键字、日期、数字大小等规则来进行过滤。

下面是一个示例代码：

function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j++) {
      if (td[j]) {
        txtValue = td[j].textContent || td[j].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break;
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
}

在本代码中，我们使用了filterTable()函数来对表格进行过滤，它通过获取用户输入的关键字并对表格数据进行匹配来实现过滤效果。