使用 W3.CSS Javascript 在所有列上搜索/过滤多个表

Question

背景：我正在为一个班级项目工作，我们必须为我们虚构的公司创建一个 CRM 系统。 对于该项目，我们使用 Python、HTML、CSS、W3.CSS、Javascript、Flask、Jinja2、Bootstrap 通过 Python 的 Spyder 以及其他在 Sublime 中编辑的组合。

我们连接到我们显示的表的 SQLite 数据库，“销售员”或用户可以使用 javascript 循环搜索每个不同页面上显示的表。

我的问题： 1.当对数据执行搜索时，我只能对最左边的列进行排序。 如何更改 javascript 以便我可以通过多列执行搜索/过滤？

注意：如果有人有兴趣帮助我了解我对这个项目的更多想法，请告诉我您是否愿意了解我正在努力实现的目标。

谢谢

w3schools 搜索/过滤代码链接： https : //www.w3schools.com/howto/howto_js_filter_table.asp

我正在使用的主页模板链接： https : //www.w3schools.com/w3css/tryw3css_templates_social.htm

“客户”页面/表格的代码

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
<title>Clients</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

</style>
</head>
<body>
<br>
<br>
<br>

<table id="Clients" class="w3-table-all">
<!-- Search Function W3 -->
<div class="container">
  <div class="col-lg-6 col-lg-offset-3 text-right">
     <input align="right" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Names..">
      </div>
</div>
<caption><h1 style="color:black;"align="center">Clients</h1></caption>
            <tr>
                <th>Name</th>
                <th>Representative ID</th>
                <th>Carrier ID</th>
                <th>Email</th>
                <th>Phone Number</th>
                <th>Company ID</th>

            </tr>


  {% for item in CRM %}



   <tr>
     <td>{{ item[1] }}</td>
     <td>{{ item[2] }}</td>
     <td>{{ item[3] }}</td>
     <td>{{ item[4] }}</td>
     <td>{{ item[5] }}</td>
     <td>{{ item[6] }}</td>

    </tr>

  {% endfor %}
</table>
<!-- Javascript for Search Function -->
<script>
function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("Clients");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>

</body>
</html>



{% endblock %}

Answer 1

我有脚本问题的解决方案：

function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("Clients");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td0 = tr[i].getElementsByTagName("td")[0];
    td1 = tr[i].getElementsByTagName("td")[1];
    td2 = tr[i].getElementsByTagName("td")[2];
    // and so on...
    if (td) {
      if (td0.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        if (td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
      }
      }
    } 
  }
}

你只需要遵循这个计划。 希望我的回答有帮助。
[编辑]
我将解释脚本的作用：
基本上，您正在使用IndexOf()方法解决一些条件，如果输入和列表中的元素之间没有出现，则返回 -1。 因此，例如，如果：

td0.innerHTML.toUpperCase().indexOf(filter)返回 -1，这意味着输入和td0的文本之间不会发生。 因此，您将需要移动到下一个条件，该条件将重复相同的事情（用另一个词）。 你会一直这样做，直到你走遍了所有的桌子（ td0, td1, td2... ）。
在每个条件下，写有tr[i].style.display = "" ，这意味着如果条件有效，我们不会隐藏该行，但如果最后没有有效条件，则在最后一个else {}条件，您将编写tr[i].style.display = "none" ，这将从表中隐藏该行。

使用 W3.CSS Javascript 在所有列上搜索/过滤多个表

问题描述

1 个解决方案

解决方案1
0 2020-06-16 09:47:05

使用 W3.CSS Javascript 在所有列上搜索/过滤多个表

问题描述

1 个解决方案

解决方案1 0 2020-06-16 09:47:05

解决方案1
0 2020-06-16 09:47:05