具有多个匹配单元格关键字的输入框答案

【问题标题】：Input box with multiple match keywords for cells具有多个匹配单元格关键字的输入框
【发布时间】：2019-06-06 22:55:06
【问题描述】：

我试图通过只输入一个而不是三个输入来使我的包含搜索更好，并单独匹配所有输入的单词。

到目前为止，我有三个输入，我可以在每个框中分别输入一个单词，并且能够一次搜索/匹配所有这些单词。例如。 “猫”、“狗”、“马”。

我想要的是只有一个输入并搜索“Cat Dog Horse”，但将它们分别匹配为“Cat”、“Dog”、“Horse”。

function setValue() {
  var inputValue = document.getElementById("inputID").value;
  var inputValue2 = document.getElementById("inputID2").value;
  var inputValue3 = document.getElementById("inputID3").value;
  $('td:contains(' + inputValue + '):contains(' + inputValue2 + '):contains(' + inputValue3 + ')').css("color", "red");
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<text>Keywords:</text><br>
<input id="inputID" value="Dog"></input>
<input id="inputID2" value="Horse"></input>
<input id="inputID3" value="Cat"></input>
<button onclick="setValue()">Use</button>
<table id="myTable">
  <tr>
    <td>Horse Dog Panda Mouse</td>
  </tr>
  <tr>
    <td>Elephant Mouse Panda Eagle</td>
  </tr>
  <tr>
    <td>Dog Fox Cat Horse</td>
  </tr>
  <tr>
    <td>Cat Elephant Eagle Fox</td>
  </tr>
</table>

实际：有效，但我需要三个单独的输入来匹配三个不同的单词。

预期：只有一个输入并且能够单独匹配所有输入的单词。

【问题讨论】：

如果您只是在搜索栏中输入 just“Fox”，它会突出显示第 3 和第 4 个单元格，还是什么都不突出？
想法是突出“Fox”的所有实例。

标签： javascript jquery html-table contains

【解决方案1】：

您可以通过空格split 字符串并重新join 以构建:contains 字符串。

例如

function setValue() {
  var inputValue = document.getElementById("inputID").value;
  if (!inputValue)
    return;

  var selector = "td:contains('" + inputValue.split(" ").join("'):contains('") + "')";
  console.log(selector);
  $(selector).css("color", "red");
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<text>Keywords:</text><br>
<input id="inputID" value="Cat Dog Horse"></input>

<button onclick="setValue()">Use</button>
<table id="myTable">
  <tr>
    <td>Horse Dog Panda Mouse</td>
  </tr>
  <tr>
    <td>Elephant Mouse Panda Eagle</td>
  </tr>
  <tr>
    <td>Dog Fox Cat Horse</td>
  </tr>
  <tr>
    <td>Cat Elephant Eagle Fox</td>
  </tr>
</table>

要将条件从 and 更改为 or，您只需用逗号分隔选择器即可。

例如

var selector = "td:contains('" + inputValue.split(" ").join("'),td:contains('") + "')";

【讨论】：

非常感谢，这很有帮助！即使一个词与任何单元格都不匹配，是否也有可能命中？例如。 “Cat Dog Lion Horse”将匹配第 1、3、4 行，而“Lion”一词将被忽略。
我假设您的意思是“或”条件而不是“和”？我已经更新了答案以说明如何做到这一点。
再次感谢，工作就像一个魅力！标记为答案。 :)
是否也可以隐藏不匹配的内容？例如。 "$(not:selector).closest("tr").hide();"。当我使用几个输入“$('td:contains(' + inputValue3 + ')').closest("tr").hide();"它会隐藏 td 与该值匹配的 tr。
您可以使用$("td:not(" + selector + ")").closest("tr").hide();隐藏不匹配的行

【解决方案2】：

您可以像这样将输入更改为数组

<html>
<style>
  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  
  th,
  td {
    padding: 5px;
  }
</style>

<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
  <text>Keywords:</text><br>
  <input id="input" value=""></input>
  <button onclick="setValue()">Use</button><br><br>
  <table id="myTable">
    <tr>
      <td>Horse Dog Panda Mouse</td>
    </tr>
    <tr>
      <td>Elephant Mouse Panda Eagle</td>
    </tr>
    <tr>
      <td>Dog Fox Cat Horse</td>
    </tr>
    <tr>
      <td>Cat Elephant Eagle Fox</td>
    </tr>
  </table>
  <script>
    function setValue() {
      var inputValue = document.getElementById("input").value;
      inputValue = inputValue.split(' ')
      for (let i of inputValue) {
        $('td:contains(' + i + ')', document.body).each(function() {
          $(this).html($(this).html().replace(
            new RegExp(i, 'g'), '<span style="color:red">' + i + '</span>'
          ));
        });
      }
    }
  </script>
</body>

</html>

我希望这段代码可以帮助你:)

【讨论】：

【解决方案3】：

这是一种不需要 jQuery 的方法（因为您显然只将它用于那个语句......）。它抓取单元格，遍历它们，并根据搜索短语检查它们的文本内容（使用数组方法every）。如果匹配，它将向单元格添加一个red 类。

function setValue() {
  const inputValue = document.getElementById("inputID").value;

  // Split the search phrase into an array
  const arr = inputValue.split(' ');

  // Grab all the cells
  const cells = document.querySelectorAll('#myTable td');

  // For each cell grab the textContent
  cells.forEach(cell => {
    const txt = cell.textContent;

    // `every` returns true if every element (search word)
    // meets the condition (the word is in the cell text)
    if (arr.every(word => txt.includes(word))) {

      // Add the red class to the cell
      cell.classList.add('red');
    }
  });
}

table, th, td { border: 1px solid black; border-collapse: collapse; }
th, td { padding: 5px; }
.red { color: red; }

<input id="inputID" value="Dog Horse Cat" />
<button onclick="setValue()">Use</button>

<table id="myTable">
  <tr><td>Horse Dog Panda Mouse</td></tr>
  <tr><td>Elephant Mouse Panda Eagle</td></tr>
  <tr><td>Dog Fox Cat Horse</td></tr>
  <tr><td>Cat Elephant Eagle Fox</td></tr>
</table>

JSFiddle

【讨论】：

感谢您也提供这个 JS 示例！ :)
NP。重新评论您对 H77 答案的评论。您可以在此处将 every 更改为 some 并获取该输出。 @JoeBerg