Question

背景我正在为一个类项目工作，我们必须为我们的虚构公司创建一个CRM系统。对于该项目，我们使用Python，HTML，CSS，W3.CSS，Javascript，Flask，Jinja2，Spyder的Bootstrap for Python以及其他在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 = ""，这意味着如果条件有效，我们就不会隐藏行，但是如果最后没有{valid}条件，那么在最后一个else {}条件下，您将输入tr[i].style.display = "none"，这将从表格中隐藏该行。

使用W3.CSS Javascript

1 个答案: