Fatal编程技术网
  • javascript/
  • 使用W3.CSS Javascript搜索/筛选所有列上的多个表

使用W3.CSS Javascript搜索/筛选所有列上的多个表

javascript python html css

使用W3.CSS Javascript搜索/筛选所有列上的多个表,javascript,python,html,css,w3.css,Javascript,Python,Html,Css,W3.css,背景： 我正在为一个班级项目工作，我们必须为我们虚构的公司创建一个CRM系统。对于这个项目，我们使用Python、HTML、CSS、W3.CSS、Javascript、Flask、Jinja2、通过Spyder为Python进行的引导以及在Sublime中编辑的其他内容的组合 我们为显示的表连接到SQLite数据库，“销售人员”或用户可以使用javascript循环搜索每个不同页面上显示的表 我的问题： 1.在对数据执行搜索时，我只能对最左边的列进行排序。 如何更改javascript，以便可以

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

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

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

注：如果有人有兴趣帮忙我对这个项目有更多的想法，请让我知道，如果你愿意听到我正在努力完成

多谢各位

链接到w3schools搜索/筛选代码：

指向我正在使用的主页模板的链接：

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

<!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 %}


客户






客户
名称
代表ID
承运人ID
电子邮件
电话号码
公司ID
{CRM%中项目的%s}
{{项目[1]}
{{项目[2]}
{{项目[3]}
{{项目[4]}
{{项目[5]}
{{项目[6]}
{%endfor%}
函数myFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“客户端”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
} 
}
}
{%endblock%}
我有您的脚本问题解决方案：

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";
      }
      }
      }
    } 
  }
}

函数myFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“客户端”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
if（td1.innerHTML.toUpperCase（）.indexOf（过滤器）>-1）{
tr[i].style.display=“”；
}否则{
if（td2.innerHTML.toUpperCase（）.indexOf（过滤器）>-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
} 
}
}
你只需要遵循这个计划。 希望我的回答是有帮助的。
[编辑]
我将解释脚本的作用：
基本上，您是在使用
IndexOf（）
方法解决一些条件，如果输入和列表中的元素之间没有出现，该方法将返回-1。例如，如果这：

td0.innerHTML.toUpperCase（）.indexOf（filter）
返回-1，这意味着在输入和
td0
中的文本之间不会出现。因此，您需要移动到下一个条件，该条件将重复相同的事情（使用另一个单词）。您将一直这样做，直到您浏览了所有表（
td0、td1、td2…
）。
在每个条件下，都会写入
tr[i].style.display=“
，这意味着如果条件有效，我们不会隐藏行，但是如果最后一个
else{}
条件下没有有效的条件，您将写入
tr[i].style.display=“none”
，这将隐藏表格中的行。

请发布您编译的HTML和CSS（特别是表格），以便我们重新创建您的问题。还值得注意的是，
div
不是
表
元素的有效子元素，可能会导致问题。感谢您帮助解决StackOverflow问题。不确定你是否注意到这个问题是关于一个班级项目的，是3年前提出的。我怀疑OP还在上那门课。如果你确实希望你的答案能帮助将来可能有同样问题的人，也许可以通过解释你的脚本在做什么来扩展你的答案。继续努力。