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

我试图通过只有一个输入而不是三个输入，并分别匹配所有输入的单词，从而使我的包含搜索变得更好

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

我想要的是只有一个输入和搜索“猫-狗-马”，但要将它们分别匹配为“猫”、“狗”、“马”

JSFiddle：

函数setValue（）{
var inputValue=document.getElementById（“inputID”）.value；
var inputValue2=document.getElementById（“InputD2”）.value；
var inputValue3=document.getElementById（“InputD3”）.value；
$（'td:contains（'+inputValue+'）：contains（'+inputValue2+'）：contains（'+inputValue3+'））.css（“颜色”，“红色”）；
}

表格，
th，
运输署{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，
运输署{
填充物：5px；
}

关键词：

使用
马狗熊猫鼠
象鼠熊猫鹰
狗狐狸猫马
猫象鹰狐狸

您可以按空格排列字符串，然后重新排列以构建字符串

e、 g

函数setValue（）{
var inputValue=document.getElementById（“inputID”）.value；
如果（！inputValue）
返回；
var selector=“td:contains（'”+inputValue.split（“”）。join（“”）：contains（'”+“）”；
控制台日志（选择器）；
$（选择器）.css（“颜色”、“红色”）；
}

表格，
th，
运输署{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，
运输署{
填充物：5px；
}

关键词：

使用
马狗熊猫鼠
象鼠熊猫鹰
狗狐狸猫马
猫象鹰狐狸

这里有一个不需要jQuery的方法（因为您显然只对这一条语句使用jQuery…）。它获取单元格，对其进行迭代，并根据搜索短语检查其文本内容（使用数组方法）。如果匹配，则向单元格添加一个

red

类

函数setValue（）{
const inputValue=document.getElementById（“inputID”）.value；
//将搜索短语拆分为数组
const arr=inputValue.split（“”）；
//抓住所有的牢房
const cells=document.queryselectoral（“#myTable td”）；
//对于每个单元格，抓取文本内容
cells.forEach（cell=>{
const txt=cell.textContent；
//'every'如果每个元素（搜索词）都返回true
//满足条件（单词在单元格文本中）
if（arr.every（word=>txt.includes（word）））{
//将红色类添加到单元格中
cell.classList.add（'red'）；
}
});
}

表格，th，td{边框：1px纯黑色；边框折叠：折叠；}
th，td{padding:5px；}
.red{color:red；}

使用
马狗熊猫鼠
象鼠熊猫鹰
狗狐狸猫马
猫象鹰狐狸

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

桌子
th，
运输署{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，
运输署{
填充物：5px；
}
关键词：

使用


马狗熊猫鼠
象鼠熊猫鹰
狗狐狸猫马
猫象鹰狐狸
函数setValue（）{
var inputValue=document.getElementById（“输入”）.value；
inputValue=inputValue.split（“”）
for（让我输入值）{
$（'td:contains（'+i+'），document.body）{
$（this）.html（$（this）.html（）.replace(
新RegExp（i，'g'），''+i+''
));
});
}
}

如果您只在搜索栏中输入“Fox”，它会突出显示第3和第4个单元格，还是什么都不突出？想法是突出显示“Fox”的所有实例。非常感谢，这非常有用！即使一个单词与任何单元格都不匹配，也可能有命中率吗？例如，“猫-狗-狮子-马”将与第1、3、4行匹配，而“狮子”一词将被忽略。我猜您指的是“或”条件，而不是“和”？我已经更新了答案，以展示如何做到这一点。再次感谢，工作得很有魅力！标记为答案。：）还有可能隐藏不匹配的内容吗？例如“$（非：选择器）.closest（“tr”）.hide（）；”。我以前使用过几个输入“$（'td:contains（'+inputValue3+'））.closest（“tr”）.hide（）；”，它会隐藏td与该值匹配的tr。可以使用

$（'td:not（“+selector+”））.closest（“tr”）.hide（）隐藏不匹配的行感谢您也提供了这个JS示例！：）NP您对H77的回答有何评论。您可以在此处更改
每个
，以获得该输出@约伯格