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

Question

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

截至目前，我有三个输入，我可以在每个框中单独输入一个单词，并且能够一次 search/match 所有这些。例如。 "Cat", "Dog", "Horse".

我想要的是只有一个输入和搜索 "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>

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

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

Answer 1

你可以 split the string by spaces and re-join them to build the :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('") + "')";

Answer 2

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

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

Answer 3

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

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

希望这段代码对您有所帮助:)

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

Input box with multiple match keywords for cells

javascript

jquery

html-table

contains