Javascript 尝试使用关键字和下拉列表筛选特定列

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

HTML

州
搜寻
全部的
加利福尼亚州
华盛顿州
城市
陈述
关键词1
关键词2
圣方济各
圣迭戈卡布卢瑞德
海蓝
盐湖城蓝
拉斯维加斯蓝红酒店

JS

函数myFunction（事件）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInputJob”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTableJob”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i

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

如果（td|u 1.innerHTML.toUpperCase（）.indexOf（filter）==0 | td|u 2.innerHTML.toUpperCase（）.indexOf（filter）==0和&td|u 3.innerHTML==document.getElementById（“StateDropdown”）.innerHTML）{但这不起作用。非常感谢！

简单的方法是：

在这两个函数之外声明

var tr

和

table

，以便您可以在这两个函数中使用这些变量

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

搜索状态时，它将过滤

trs

，并将异常设置为

display none

，因此在状态搜索后，只保存在

tr

函数filterTable（）末尾可见的那些

现在，您的函数

myFunction（event）

将仅使用已过滤（如果已过滤）

trs

顺便说一句，你的关键词2搜索根本不起作用，但这不是问题所在

var table=document.getElementById（“myTableJob”）；
var tr=table.querySelectorAll（'tr'）；
函数myFunction（事件）{
无功输入，滤波器，td，i；
输入=document.getElementById（“myInputJob”）；
filter=input.value.toUpperCase（）；
对于（i=0；i

搜寻
全部的
加利福尼亚州
华盛顿州
城市
陈述
关键词1
关键词2
旧金山
加利福尼亚州
灰色
红色
圣地亚哥
加利福尼亚州
蓝色
红色
西雅图
华盛顿州
蓝色
红色
盐湖城
美国犹他州
蓝色
红色
拉斯维加斯
内华达州
蓝色
粉红色

谢谢@ikiK这是一个好东西。我取出了&&行并修复了关键字2列。当我的表位于HTML中时，它对我有效。当我尝试添加windows.onload函数来调用包含该表的js文件时，这就是我现在遇到的错误。TypeError:无法在li处读取null的属性'querySelectorAll'ne 55-这行代码var tr=table.querySelectorAll（'tr'）是哪一行；我调用了JS文件，然后声明了我的变量。我不确定在HTML中有表还是调用了一个包含表的JS文件有什么区别。@RickD我现在在移动设备上，但这只是意味着选择器没有调用表，在我的头上这只是时间问题，DOM可能是在表之前加载的，请尝试声明这些在js的末尾有两个变量，用于生成表。还有它的window.onload，而不是windows，表是否已加载？谢谢您的帮助。是的，正确，我的意思是加载

<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>

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

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