尝试使用关键字以及带有下拉列表的特定列进行过滤

【问题标题】：Trying to filter with keywords and also specific column with dropdown尝试使用关键字以及带有下拉列表的特定列进行过滤
【发布时间】：2020-09-09 16:14:24
【问题描述】：

我有一个可以使用关键字搜索的表格，但还希望包含一个下拉框，该下拉框也将成为过滤的一部分。下面是我的代码。我可以从下拉列表中选择一个状态，这将过滤状态，但只要我输入关键字，它就会恢复为所有状态。我想先使用 drop sown 按状态过滤，然后仅使用该状态的关键字。

HTML

<!DOCTYPE html>

<html lang="en">
<html>
<head>
<title>States</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="container">

<div id="Header">

</div>
<div id="MainBody">

<h2>Search</h2>
<input type="text" id="myInputJob" onkeyup="myFunction()" placeholder="" title="Type Here">

  <select id="StateDropdown" oninput="filterTable()">
  <option>All</option>
  <option>CA</option>
  <option>WA</option>
</select>

<div id="TableJob">
<table id="myTableJob">
<tr class="header">
<th>City</th>
<th>State</th>
<th>Keyword1</th>
<th>Keyword2</th></tr>
<tr><td>San Francisco</td><td>CA</td><td>Blue</td><td>Red</td></tr>
<tr><td>San Diego</td><td>CA</td><td>Blue</td><td>Red</td></tr>
<tr><td>Seattle</td><td>WA</td><td>Blue</td><td>Red</td></tr>
<tr><td>Salt Lake City</td><td>UT</td><td>Blue</td><td>Red</td></tr>
<tr><td>Las Vegas</td><td>NV</td><td>Blue</td><td>Red</td></tr>
</table>

</div>
</div>

</body>
</html>

JS

<script>

function myFunction(event) {
var input, filter, table, tr, td, i;
input = document.getElementById("myInputJob");
filter = input.value.toUpperCase();
table = document.getElementById("myTableJob");
 tr = table.getElementsByTagName("tr");

 for (i = 0; i < tr.length; i++) {
table.style.display = ""
if (document.getElementById('myInputJob').value == '') { 
table.style.display = "";

} else {
table.style.display = "";

}
    td_1 = tr[i].getElementsByTagName("td")[2];
    td_2 = tr[i].getElementsByTagName("td")[3];
    td_3 = tr[i].getElementsByTagName("td")[1];
    
    if (td_1 || td_2) {
   if (td_1.innerHTML.toUpperCase().indexOf(filter) == 0 || td_2.innerHTML.toUpperCase().indexOf(filter) == 0 && td_3.innerHTML == document.getElementById("StateDropdown").innerHTML) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  } 
}

function filterTable() {

  let dropdown, table, rows, cells, state, filter;
  dropdown = document.getElementById("StateDropdown");
  table = document.getElementById("myTableJob");
  rows = table.getElementsByTagName("tr");
  filter = dropdown.value;

  
  for (let row of rows) { 
    cells = row.getElementsByTagName("td");
    state = cells[1] || null; 
    if (filter === "All" || !state || (filter === state.textContent)) {
      row.style.display = ""; 
    }
    else {
      row.style.display = "none"; 
    }
  }
}

</script>

我觉得我需要在里面放一个 AND 条件，像这样

如果 (td_1.innerHTML.toUpperCase().indexOf(filter) == 0 || td_2.innerHTML.toUpperCase().indexOf(filter) == 0 && td_3.innerHTML == document.getElementById( "StateDropdown").innerHTML) { 但这不起作用。非常感谢！

【问题讨论】：

    标签： javascript html


    【解决方案1】：

    简单的方法是：

    在这两个函数之外声明 var tr 和 table，以便您可以在这两个函数中使用这些变量。

    var table = document.getElementById("myTableJob");
var tr=table.querySelectorAll('tr');

    当您搜索状态时，它会过滤trs 并将unwonted 设置为display none，因此在状态搜索后保存在tr 中只有那些在function filterTable() 末尾可见的人

    tr = table.querySelectorAll('tr:not([style="display: none;"])');

    现在您的函数 myFunction(event) 将仅使用已过滤（如果已过滤）trs。

    顺便说一句，您的 Keyword2 搜索根本不起作用，但这不是问题。

    var table = document.getElementById("myTableJob");
var tr = table.querySelectorAll('tr'); 

function myFunction(event) {
var input, filter, td, i;
input = document.getElementById("myInputJob");
filter = input.value.toUpperCase();



 for (i = 0; i < tr.length; i++) {
table.style.display = ""
if (document.getElementById('myInputJob').value == '') { 
table.style.display = "";

} else {
table.style.display = "";

}
    td_1 = tr[i].getElementsByTagName("td")[2];
    td_2 = tr[i].getElementsByTagName("td")[3];
    td_3 = tr[i].getElementsByTagName("td")[1];
    
    if (td_1 || td_2) {
   if (td_1.innerHTML.toUpperCase().indexOf(filter) == 0 || td_2.innerHTML.toUpperCase().indexOf(filter) == 0 && td_3.innerHTML == document.getElementById("StateDropdown").innerHTML) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  } 
}

function filterTable() {

  let dropdown, rows, cells, state, filter;
  dropdown = document.getElementById("StateDropdown");
  rows = table.getElementsByTagName("tr");
  filter = dropdown.value;

  
  for (let row of rows) { 
    cells = row.getElementsByTagName("td");
    state = cells[1] || null; 
    if (filter === "All" || !state || (filter === state.textContent)) {
      row.style.display = ""; 
    }
    else {
      row.style.display = "none"; 
    }
  }
tr = table.querySelectorAll('tr:not([style="display: none;"])');  
}
    <div id="container">

  <div id="Header">

  </div>
  <div id="MainBody">

    <h2>Search</h2>
    <input type="text" id="myInputJob" onkeyup="myFunction()" placeholder="" title="Type Here">

    <select id="StateDropdown" oninput="filterTable()">
      <option>All</option>
      <option>CA</option>
      <option>WA</option>
    </select>

    <div id="TableJob">
      <table id="myTableJob">
        <tr class="header">
          <th>City</th>
          <th>State</th>
          <th>Keyword1</th>
          <th>Keyword2</th>
        </tr>
        <tr>
          <td>San Francisco</td>
          <td>CA</td>
          <td>Gray</td>
          <td>Red</td>
        </tr>
        <tr>
          <td>San Diego</td>
          <td>CA</td>
          <td>Blue</td>
          <td>Red</td>
        </tr>
        <tr>
          <td>Seattle</td>
          <td>WA</td>
          <td>Blue</td>
          <td>Red</td>
        </tr>
        <tr>
          <td>Salt Lake City</td>
          <td>UT</td>
          <td>Blue</td>
          <td>Red</td>
        </tr>
        <tr>
          <td>Las Vegas</td>
          <td>NV</td>
          <td>Blue</td>
          <td>Pink</td>
        </tr>
      </table>

    </div>
  </div>

    【讨论】：

    • 感谢@ikiK，这是个好东西。我取出 && 行并修复了 Keyword2 列。当我的表格在 HTML 中时，它对我有用。当我尝试添加 windows.onload 函数来调用其中包含表的 js 文件时，这是我现在遇到的错误。 TypeError: Cannot read property 'querySelectorAll' of null at line 55 - 这是这行代码 var tr = table.querySelectorAll('tr');我调用了 JS 文件，然后声明了我的变量。我不确定在 HTML 中有表格或调用其中有表格的 JS 文件有什么区别。
    • @RickD im 现在在移动设备上，但这只是意味着选择器没有 cacth 表格，在我看来，这只是时间问题，DOM 可能在表格之前加载，尝试将这两个变量声明为生成表格的 js 的结尾。
    • 也是它的window.onload，而不是windows，你的表是否加载了？
    • 感谢您的帮助。是的，没错，我的意思是说window.onload。我试图在 table.function 之后移动 JS 文件中的 2 个变量。不知道如何向您展示我的 JS 文件，但我有我的表然后 我得到一个未定义的 GetManuals。在 JS 文件中添加变量的正确方法是什么？我在行的开头/结尾使用 ' 和 /。像 San Francisco CA Gray Red \ OR '
    • @RickD 抱歉，无法为您提供这样的帮助。我回答了关于搜索的问题，它在 sn-p 中正常工作。您的设置和 JS Scope 有问题。你应该问另一个问题，你会在哪里解释你的设置是如何破坏的。
    猜你喜欢
    • 2023-03-21
    • 2019-08-23
    • 2017-12-12
    • 1970-01-01
    • 1970-01-01
    • 2020-01-07
    • 1970-01-01
    • 2011-03-07
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode