使用JavaScript实现表格筛选功能

介绍

表格是网页中常见的交互形式。而筛选的功能在一些数据量较大的表格中则显得特别重要。本文介绍使用JavaScript实现表格筛选功能的步骤和相关代码。

实现步骤

步骤一：获取表格数据

要实现表格筛选功能，首先需要获取表格中的数据。可以通过JavaScript中的document对象的getElementById()方法获取到表格元素，并使用该元素的rows属性获取到表格中的所有行元素。接下来只需遍历这些行元素，获取每行的单元格内容并存储到一个二维数组中。

//获取表格元素
var table = document.getElementById('mytable');
//定义二维数组存储表格数据
var data = [];
//遍历行元素，获取每行单元格内容
for (var i = 0; i < table.rows.length; i++) {
  var row = [];
  for (var j = 0; j < table.rows[i].cells.length; j++) {
    row.push(table.rows[i].cells[j].textContent);
  }
  data.push(row);
}

以上代码中，我们使用了<table>元素的id属性值为"mytable"，你可以根据实际情况进行修改。

步骤二：创建筛选表单

接下来，我们需要在页面上创建一个筛选表单，用户可以通过该表单输入筛选条件。一般情况下，筛选表单包含一个输入框和一个按钮。在用户输入筛选条件后，点击按钮即可进行筛选操作。

//创建筛选表单元素
var form = document.createElement('form');
form.setAttribute('class', 'form-inline');
//创建输入框元素
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('class', 'form-control mb-2 mr-sm-2 mb-sm-0');
input.setAttribute('placeholder', '输入筛选条件');
//创建按钮元素
var button = document.createElement('button');
button.setAttribute('class', 'btn btn-primary');
button.textContent = '筛选';
//将表单元素、输入框元素和按钮元素添加到页面上
var container = document.getElementById('container');
container.insertBefore(form, table);
form.appendChild(input);
form.appendChild(button);

以上代码中，我们创建了一个<form>元素，并设置其class属性为"form-inline"，以达到与表格呈现在同一行的效果。然后，我们创建了一个<input>元素作为筛选条件的输入框，设置其class属性为"form-control mb-2 mr-sm-2 mb-sm-0"，以达到Bootstrap样式的效果。最后，我们创建了一个<button>元素作为筛选按钮，并设置其class属性为"btn btn-primary"，以达到Bootstrap样式的效果。

步骤三：实现筛选功能

在用户输入筛选条件并点击筛选按钮后，我们需要根据该条件进行筛选。以下是筛选操作的代码：

//为筛选按钮绑定事件
button.addEventListener('click', function() {
  //获取筛选条件
  var filterValue = input.value.toLowerCase();
  //过滤数据
  var filteredData = data.filter(function(row) {
    return row.some(function(cell) {
      return cell.toLowerCase().includes(filterValue);
    });
  });
  //更新表格内容
  updateTable(filteredData);
});
//更新表格内容函数
function updateTable(data) {
  //获取表格元素
  var table = document.getElementById('mytable');
  //清空表格内容（保留表头）
  while (table.rows.length > 1) {
    table.deleteRow(1);
  }
  //添加筛选后的数据到表格中
  data.forEach(function(row) {
    var newRow = table.insertRow(-1);
    row.forEach(function(cell) {
      var newCell = newRow.insertCell(-1);
      newCell.textContent = cell;
    });
  });
}

以上代码中，我们首先为筛选按钮绑定了一个click事件的监听器，当用户点击筛选按钮时，该监听器将获取输入框的value属性值作为筛选条件，并将该条件转换为小写字母形式，以避免大小写问题。然后，我们使用了数组的filter()方法比较简便地实现了筛选操作，其中使用了数组的some()方法判断该行中是否包含符合条件的单元格内容。

最后，我们定义了一个updateTable()函数用于更新表格内容。该函数首先获取表格元素，然后通过while循环删除表格中原有的行元素，保留表头。接着，该函数将筛选后的数据添加到表格中。

完整代码

//获取表格元素
var table = document.getElementById('mytable');
//定义二维数组存储表格数据
var data = [];
//遍历行元素，获取每行单元格内容
for (var i = 0; i < table.rows.length; i++) {
  var row = [];
  for (var j = 0; j < table.rows[i].cells.length; j++) {
    row.push(table.rows[i].cells[j].textContent);
  }
  data.push(row);
}
//创建筛选表单元素
var form = document.createElement('form');
form.setAttribute('class', 'form-inline');
//创建输入框元素
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('class', 'form-control mb-2 mr-sm-2 mb-sm-0');
input.setAttribute('placeholder', '输入筛选条件');
//创建按钮元素
var button = document.createElement('button');
button.setAttribute('class', 'btn btn-primary');
button.textContent = '筛选';
//将表单元素、输入框元素和按钮元素添加到页面上
var container = document.getElementById('container');
container.insertBefore(form, table);
form.appendChild(input);
form.appendChild(button);
//为筛选按钮绑定事件
button.addEventListener('click', function() {
  //获取筛选条件
  var filterValue = input.value.toLowerCase();
  //过滤数据
  var filteredData = data.filter(function(row) {
    return row.some(function(cell) {
      return cell.toLowerCase().includes(filterValue);
    });
  });
  //更新表格内容
  updateTable(filteredData);
});
//更新表格内容函数
function updateTable(data) {
  //获取表格元素
  var table = document.getElementById('mytable');
  //清空表格内容（保留表头）
  while (table.rows.length > 1) {
    table.deleteRow(1);
  }
  //添加筛选后的数据到表格中
  data.forEach(function(row) {
    var newRow = table.insertRow(-1);
    row.forEach(function(cell) {
      var newCell = newRow.insertCell(-1);
      newCell.textContent = cell;
    });
  });
}

总结

在本文中，我们介绍了如何使用JavaScript实现表格筛选功能。步骤主要包括获取表格数据、创建筛选表单和实现筛选功能。这些步骤都比较简单，但能够较好地提升表格的交互性和可用性。

在实现过程中，我们使用了数组的filter()方法和some()方法，可以看出JavaScript在处理数据方面的强大之处。另外，我们还使用了Bootstrap框架的样式，使得表格和筛选表单在视觉上更加统一。

关键点提示：

通过document对象的getElementById()方法获取到表格元素，并使用该元素的rows属性获取到表格中的所有行元素。使用二维数组存储表格数据。

创建筛选表单包含一个输入框和一个按钮。在用户输入筛选条件后，点击按钮即可进行筛选操作。

使用了数组的filter()方法比较简便地实现了筛选操作，其中使用了数组的some()方法判断该行中是否包含符合条件的单元格内容。

函数updateTable()用于更新表格内容。该函数首先获取表格元素，然后通过while循环删除表格中原有的行元素，保留表头。接着，该函数将筛选后的数据添加到表格中。