Javascript按多列过滤答案

【问题标题】：Javascript Filtering by multiple columnsJavascript按多列过滤
【发布时间】：2020-11-15 12:16:09
【问题描述】：

从下面的帖子中借用代码，我可以使用 || 过滤 2 列（或）运算符。但是，我希望能够使用 && (And) 运算符进行过滤。我的多次尝试都没有成功。我需要一些帮助。

function myFunction() {
  var input0, input1, filter0, filter1, table, tr, td, cell, i, j;
  document.getElementById("myInput0").value = 'Female';
  document.getElementById("myInput1").value = 'Engineering';
  input0 = document.getElementById("myInput0");
  input1 = document.getElementById("myInput1");
  filter0 = input0.value.toUpperCase();
  filter1 = input1.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {
    // Hide the row initially.
  tr[i].style.display = "none";

  td = tr[i].getElementsByTagName("td");
    for (var j = 0; j < td.length; j++) {
      cell = tr[i].getElementsByTagName("td")[j];
      if (cell) {
         if (cell.textContent.toUpperCase().indexOf(filter0)>-1 || 
    cell.textContent.toUpperCase().indexOf(filter1)>-1) {
          tr[i].style.display = "";
          break;
        } 
      }
    }
  }
}

    <body>
    <input type="text" id="myInput0">
    <input type="text" id="myInput1">
    <input type='button' onclick='myFunction()' value='click me' />

    <table id="myTable">
      <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Gender</th>
        <th>Department</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>Male</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>Female</td>
        <td>Service</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>Female</td>
        <td>Service</td>
      </tr>
      <tr>
        <td>Anja</td>
        <td>Ravendale</td>
        <td>Female</td>
        <td>Engineering</td>
      </tr>
      <tr>
        <td>Thomas</td>
        <td>Dubois</td>
        <td>Male</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td>Deidre</td>
        <td>Masters</td>
        <td>Female</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td>Sean</td>
        <td>Franken</td>
        <td>Male</td>
        <td>Engineering</td>
      </tr>
      </tbody>
    </table>

    </body>

【问题讨论】：

标签： javascript list filter

【解决方案1】：

对于每个单元格，您可以分别检查每个过滤器，然后只更改满足所有过滤器条件的行的 DOM。

（此示例使用您的代码的重组版本。）

document.getElementById("myInput0").value = 'Female';
document.getElementById("myInput1").value = 'Engineering';
const
  input0 = document.getElementById("myInput0"),
  input1 = document.getElementById("myInput1"),
  table = document.getElementById("myTable"),
  rows = table.getElementsByTagName("tr");

function myFunction() {
  filter0 = input0.value.toUpperCase(),
  filter1 = input1.value.toUpperCase();
  for (let row of rows) {
    row.classList.add("hidden");
    const cells = row.getElementsByTagName("td");
    let
      filter0met = false,
      filter1met = false;
    for (let cell of cells) {
      if (cell.textContent.toUpperCase().includes(filter0)) {
        filter0met = true;
      }
      if (cell.textContent.toUpperCase().includes(filter1)) {
        filter1met = true;
      }
    }
    if (filter0met && filter1met) {
      row.classList.remove("hidden");
    }
  }
}

.hidden {
  display: none;
}

<body>
  <input type="text" id="myInput0"><input type="text" id="myInput1"><input type='button' onclick='myFunction()' value='click me' />
  <table id="myTable">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Gender</th>
        <th>Department</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>Male</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>Female</td>
        <td>Service</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>Female</td>
        <td>Service</td>
      </tr>
      <tr>
        <td>Anja</td>
        <td>Ravendale</td>
        <td>Female</td>
        <td>Engineering</td>
      </tr>
      <tr>
        <td>Thomas</td>
        <td>Dubois</td>
        <td>Male</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td>Deidre</td>
        <td>Masters</td>
        <td>Female</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td>Sean</td>
        <td>Franken</td>
        <td>Male</td>
        <td>Engineering</td>
      </tr>
    </tbody>
  </table>

</body>

【讨论】：

谢谢。你很快就解决了这个问题。我可以通过在此页面上运行代码 sn-p 看到这一点。但是，我已经将整个 sn-p 添加到 Notepad++ 中，我无法让它工作。我确定我遗漏了一些明显的东西。
我能想到的你可能忽略的唯一事情是 1) script 元素应该是 body 中的最后一个元素（以确保 HTML 在脚本运行），2）CSS 应该在 head 内的 style 元素中（或在正确链接的外部样式表中）。
太棒了，很高兴听到它。
我已经为此苦苦挣扎了几个月，陷入了困境并找到了解决方法，但我真的很想让它适用于我的应用程序。我是 SharePoint 管理员，这就是我想让它工作的环境。我已尽可能严格地遵循您的指示。在 SharePoint 中，我将脚本编辑器添加到页面并添加您的代码。但是，为了克服错误，我使用 table = document.getElementsByClassName("ms-listviewtable")[0] 而不是 querySelector。它在记事本++中仍然可以正常工作。由于某种原因，SharePoint 去掉了 Body 和 Head 标记。有什么想法吗？
对不起，没有。我对 SharePoint 不熟悉。不过，使用getElementsByClassName 听起来确实很合理。

【解决方案2】：

经过多次试验和错误，我能够将一些 JQuery 放在一起，这些 JQuery 将动态搜索第一个输入，然后在这些结果中搜索第二个输入。注意，我使用的是 SP2016。虽然我已将它包含在我的帖子中，但我无法调用“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”来工作。我发现在我的 SharePoint 网站上下载和存储文件是可行的。对于我的要求，我想用分组的行显示我的列表，所以我使用一个函数来折叠加载时的组。需要注意的是列表视图中的组必须配置为展开。

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!DOCTYPE html>
<html>
<head>
<SCRIPT type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></SCRIPT>

<script>
           //If rows are not grouped, remove this function
                $(window).load(function () {
                $(".ms-commentcollapse-icon").click();
                });

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = this.value.toLowerCase();

         //If rows are not grouped, remove this line
         $(".ms-commentexpand-icon").click();

    $('.ms-listviewtable > tbody > tr').addClass('myInputMismatch').filter(function() {
      return this.innerHTML.toLowerCase().indexOf(value) > -1;
}).removeClass('myInputMismatch');
  });
  $("#myInput1").on("keyup", function() {
    var value = this.value.toLowerCase();
    $('.ms-listviewtable > tbody > tr').addClass('myInput1Mismatch').filter(function() {
      return this.innerHTML.toLowerCase().indexOf(value) > -1;
}).removeClass('myInput1Mismatch');
  });
});
</script>
<style>
 .myInputMismatch, .myInput1Mismatch { display: none; }
</style></head>
<input id="myInput" type="text" Placeholder="Search here 1st..."><input id="myInput1" type="text" Placeholder="Search here 2nd...">

【讨论】：