Question

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

截至目前，我有3个输入，可以在每个框中分别输入一个单词，并能够一次搜索/匹配所有单词。例如。 “猫”，“狗”，“马”。

我只希望输入一个并搜索“猫狗马”，但要分别将它们匹配为“猫”，“狗”，“马”。

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字符串，然后重新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>

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

例如

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

Answer 2

这是一种不需要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

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>

我希望这段代码可以对您有所帮助：）

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

3 个答案: