原生JS 实现的input输入时表格过滤操作示例

通过原生JS实现的input输入时表格过滤操作，是一种比较常见的前端开发需求，可以让用户通过输入关键词来快速筛选指定表格中的数据。本文将提供一份完整的攻略，帮助网站开发者实现此功能。

步骤一：基本HTML结构

首先，在HTML中需要准备好表格结构，它应该包含表头和表身，以及需要筛选的列。例如：

<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

步骤二：编写JS代码

接下来，需要通过JS代码实现输入框与表格的交互。可以先在HTML中添加一个输入框，如下所示：

<input type="text" id="filterInput" placeholder="请输入关键词">

然后，在JS代码中定义一个函数，以实现过滤功能。该函数应当在每次输入框的值发生变化时被调用，同时判断当前输入框的值是否符合筛选条件，并将符合筛选条件的行设置为可见状态，不符合筛选条件的行设置为隐藏状态。例如：

function filterTable() {
  const input = document.getElementById('filterInput');
  const filter = input.value.toUpperCase();
  const table = document.querySelector('table');
  const rows = table.querySelectorAll('tr');

  for (let i = 1; i < rows.length; i++) {
    const cells = rows[i].querySelectorAll('td');
    let found = false;

    for (let j = 0; j < cells.length; j++) {
      const cellValue = cells[j].textContent.toUpperCase();

      if (cellValue.indexOf(filter) > -1) {
        found = true;
        break;
      }
    }

    if (found) {
      rows[i].style.display = '';
    } else {
      rows[i].style.display = 'none';
    }
  }
}

该函数从输入框中获取输入的值，并将其转换为大写形式，以消除大小写的影响。然后获取表格中的所有行，并对每行进行筛选。对于每个单元格，都会获取其中的文本内容，并检查其是否包含输入框中的关键词。最后，根据检查结果将行的可见性进行设置。

接下来，还需要绑定该函数到输入框的事件中，以便在输入框的值发生变化时自动调用。具体实现代码如下：

const input = document.getElementById('filterInput');
input.addEventListener('keyup', filterTable);

步骤三：完善样式

最后，在CSS样式表中可以进一步美化整个搜索框和表格的样式。例如：

#filterInput {
  display: block;
  margin-bottom: 16px;
  padding: 8px;
  width: 100%;
  border-radius: 4px;
  border: 2px solid #ccc;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

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

th {
  background-color: #eee;
}

至此，就完成了通过原生JS实现的input输入时表格过滤操作的完整攻略。可以通过以上代码示例，了解到JS代码功能实现的具体细节，帮助开发者更好的实现该功能。