首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用java script按多列onkeyup筛选表

使用JavaScript按多列onkeyup筛选表的方法如下:

  1. 首先,需要在HTML中创建一个表格,并为每个列创建一个输入框,用于筛选数据。例如:
代码语言:txt
复制
<input type="text" id="column1" onkeyup="filterTable()" placeholder="列1">
<input type="text" id="column2" onkeyup="filterTable()" placeholder="列2">
<input type="text" id="column3" onkeyup="filterTable()" placeholder="列3">

<table id="myTable">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  ...
</table>
  1. 接下来,需要编写JavaScript函数来实现筛选功能。该函数将根据输入框中的值,筛选表格中的数据并显示匹配的行。例如:
代码语言:txt
复制
function filterTable() {
  var input1 = document.getElementById("column1");
  var input2 = document.getElementById("column2");
  var input3 = document.getElementById("column3");
  var filter1 = input1.value.toUpperCase();
  var filter2 = input2.value.toUpperCase();
  var filter3 = input3.value.toUpperCase();
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr");

  for (var i = 1; i < rows.length; i++) {
    var cells = rows[i].getElementsByTagName("td");
    var match1 = cells[0].textContent.toUpperCase().indexOf(filter1) > -1;
    var match2 = cells[1].textContent.toUpperCase().indexOf(filter2) > -1;
    var match3 = cells[2].textContent.toUpperCase().indexOf(filter3) > -1;

    if (match1 && match2 && match3) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}
  1. 最后,将以上代码保存为一个JavaScript文件,并在HTML中引入该文件。例如:
代码语言:txt
复制
<script src="filterTable.js"></script>

这样,当用户在输入框中输入内容时,表格将根据输入的值进行筛选,并显示匹配的行。

注意:以上代码仅为示例,实际应用中需要根据具体的表格结构和需求进行适当的修改。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的结果

领券