js实现表格筛选功能

下面是实现表格筛选功能的完整攻略。

前言

表格是网页中常见的元素之一，而筛选功能则是表格中必不可少的一项功能，可以让用户更方便地查找所需要的数据。本文主要介绍如何使用JavaScript实现表格筛选功能。

实现思路

要实现表格筛选功能，我们可以采用以下步骤：

获取表格元素和筛选条件输入框元素；
监听筛选条件输入框的变化；
根据输入框中的内容筛选表格的行数，并隐藏没有匹配的行。

示例1：基本实现

下面是一个实现表格筛选功能的基本示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>表格筛选功能示例</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

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

    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

<h2>表格筛选功能示例</h2>

<p>输入条件筛选表格行：</p>

<input type="text" id="myInput" onkeyup="filterTable()" placeholder="请输入关键字">

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>居住城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
      <td>广州</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>男</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>30</td>
      <td>女</td>
      <td>深圳</td>
    </tr>
  </tbody>
</table>

<script>
function filterTable() {
  // 获取表格和输入框元素
  var table = document.getElementById("myTable");
  var input = document.getElementById("myInput");
  // 获取输入框的值，并转换成小写字符
  var filter = input.value.toLowerCase();
  // 获取表格中的所有行元素
  var rows = table.getElementsByTagName("tr");

  // 遍历表格中的所有行
  for (var i = 0; i < rows.length; i++) {
    // 获取每一行的所有单元格
    var cells = rows[i].getElementsByTagName("td");
    var rowText = "";

    // 遍历每一行的单元格
    for (var j = 0; j < cells.length; j++) {
      rowText += cells[j].textContent.toLowerCase() + " ";
    }

    // 检查该行是否包含输入框中的文本
    if (rowText.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}
</script>

</body>
</html>

在上面的代码中，我们首先在页面中创建了一个表格，并为其添加了一个<input>元素作为筛选条件输入框。当用户在输入框中输入内容时，我们通过filterTable()函数来自动筛选出符合条件的表格行，并将不符合条件的行设置为隐藏。

在filterTable()函数中，我们首先获取了表格和输入框的元素，并利用toLowerCase()方法将输入框中的输入转换成小写字符，这样就可以在比较时忽略大小写了。接着，我们遍历了表格中的所有行，并获取每一行中的所有单元格，将它们的文字内容拼接成一个字符串rowText。然后，我们检查该行是否包含输入框中的文本，如果是，则将该行设置为显示，否则将该行设置为隐藏。

示例2：进阶实现

上面的示例代码中，我们只实现了基本的表格筛选功能。下面，我们可以进一步优化代码，以实现更加强大的表格筛选功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>表格筛选功能示例</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

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

    th {
      background-color: #f2f2f2;
    }

    .filter-container {
      margin-bottom: 10px;
    }

    .filter-container input[type="text"] {
      width: 200px;
      height: 30px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
      font-size: 14px;
    }

    .filter-container select {
      height: 35px;
      padding: 5px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
  </style>
</head>
<body>

<h2>表格筛选功能示例</h2>

<div class="filter-container">
  <label for="myInput">关键字：</label>
  <input type="text" id="myInput" placeholder="请输入关键字">
  <label for="mySelect">选择条件：</label>
  <select id="mySelect">
    <option value="">所有条件</option>
    <option value="name">姓名</option>
    <option value="age">年龄</option>
    <option value="gender">性别</option>
    <option value="city">居住城市</option>
  </select>
</div>

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>居住城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
      <td>广州</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>男</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>30</td>
      <td>女</td>
      <td>深圳</td>
    </tr>
  </tbody>
</table>

<script>
function filterTable() {
  // 获取表格和输入框、选择框元素
  var table = document.getElementById("myTable");
  var input = document.getElementById("myInput");
  var select = document.getElementById("mySelect");
  // 获取输入框和选择框的值，并转换成小写字符
  var filter = input.value.toLowerCase();
  var column = select.value;

  // 获取表格中的所有行元素
  var rows = table.getElementsByTagName("tr");

  // 遍历表格中的所有行
  for (var i = 0; i < rows.length; i++) {
    // 获取每一行的所有单元格
    var cells = rows[i].getElementsByTagName("td");
    var rowText = "";

    // 遍历每一行的单元格
    for (var j = 0; j < cells.length; j++) {
      // 获取当前列的列名
      var columnName = table.rows[0].cells[j].textContent.toLowerCase().trim();
      // 如果是第一行，则将当前列名作为列的名称
      if (i === 0) {
        table.rows[i].cells[j].setAttribute("data-column-name", columnName);
      }
      // 如果当前列的名称和选择框中的值相等，则将该列的值拼接到rowText变量中
      if (column === "" || columnName === column) {
        rowText += cells[j].textContent.toLowerCase() + " ";
      }
    }

    // 检查该行是否包含输入框中的文本
    if (rowText.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

// 监听输入框和选择框的变化
var input = document.getElementById("myInput");
var select = document.getElementById("mySelect");
input.addEventListener("keyup", filterTable);
select.addEventListener("change", filterTable);
</script>

</body>
</html>

在以上代码中，我们优化了输入框和选择框的样式，并为选择框添加了多个选项，可以让用户可以选择在哪个列上进行筛选。在filterTable()函数中，我们同样获取了表格和输入框、选择框元素，并分别获取了它们的值。在遍历表格的行时，我们先获取了每一行的所有单元格，并获取当前列的列名。如果是第一行，则将当前列名作为列的名称，以便在后续的筛选中进行检查。接着，我们检查当前列的名称和选择框中的值是否相等，如果是，则将该列的值拼接到rowText变量中，最后再看该行是否包含输入框中的文本，进行显示或隐藏的操作。

在这个示例代码中，我们实现了筛选条件的多元化，提高了用户体验，同时也可以通过改变列名称实现中英文切换，为国际化提供了支持。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现表格筛选功能 - Python技术站

前言

实现思路

示例1：基本实现

示例2：进阶实现

相关文章