使用表修复javascript搜索_Javascript_Html

使用表修复javascript搜索

javascript html

使用表修复javascript搜索,javascript,html,Javascript,Html,我在这里找到了一个答案，可以创建一个javascript搜索来隐藏和显示带有特定类标记的Div，它工作得很好。然后我介绍了一张桌子，但它不起作用。所以我做了一个测试，我把要搜索的类（target）放在td中的一个p标记中，并给周围的一个div第二个类。我在javascript中添加了两行代码来隐藏div的类。成功了但是，当我向表中添加更多td时，它不会隐藏在div中的整行。它只隐藏段落。。。所以所有的行仍然显示，但是带有我的目标标记的段落被抹掉了我包含的代码中有一个有效的表，另一个无效的表被

我在这里找到了一个答案，可以创建一个javascript搜索来隐藏和显示带有特定类标记的Div，它工作得很好。然后我介绍了一张桌子，但它不起作用。所以我做了一个测试，我把要搜索的类（target）放在td中的一个p标记中，并给周围的一个div第二个类。我在javascript中添加了两行代码来隐藏div的类。成功了

但是，当我向表中添加更多td时，它不会隐藏在div中的整行。它只隐藏段落。。。所以所有的行仍然显示，但是带有我的目标标记的段落被抹掉了

我包含的代码中有一个有效的表，另一个无效的表被注释掉了。我已经为此绞尽脑汁好几个小时了，作为一个不懂javascript的人，我想我已经尽了最大的努力

有什么建议吗

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
function myFunction() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');
  var divsToHide = document.getElementsByClassName('rowhide');
    
  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      nodes[i].style.display = "block";
      divsToHide[i].style.display = "block";
    } else {
      nodes[i].style.display = "none";
      divsToHide[i].style.display = "none";
    }
  }
}
</script>
<body>
<table align="center" width="20%">
  <tr>
    <td style="padding-right: 10px">
      <input type="text" id="Search" onkeyup="myFunction()" placeholder="Please enter a search term.." title="Type in a name">
    </td>
  </tr>
</table>
<br>


<table width=960 border=0 align=center>

<!--
<div class=rowhide><tr class=tmenu2><td><a href=CustomerTest.asp?CustNumber=00125ABIT&Ship=Here class=listlink>00125ABIT</a></td><td><p class=target>A BIT OF NATURE</p></td><td><p>221 E SPRING ST</p></td><td><p>ST MARYS</p></td><td><p>OH</p></td><td><p>45885</p></td></tr></div>
<div class=rowhide><tr class=tmenu><td><a href=CustomerTest.asp?CustNumber=00125ACCEN&Ship=Here class=listlink>00125ACCEN</a></td><td><p class=target>ACCENT FLORAL</p></td><td><p>1330 BECK AVE</p></td><td><p>CODY</p></td><td><p>WV</p></td><td><p>82414</p></td></tr></div>
<div class=rowhide><tr class=tmenu2><td><a href=CustomerTest.asp?CustNumber=00125ADAMS&Ship=Here class=listlink>00125ADAMS</a></td><td><p class=target>ADAMS COUNTY FLORIST  GIFTS</p></td><td><p>209 W MAIN ST</p></td><td><p>WEST UNION</p></td><td><p>OH</p></td><td><p>45693</p></td></tr></div>
<div class=rowhide><tr class=tmenu><td><a href=CustomerTest.asp?CustNumber=00125ALVIS&Ship=Here class=listlink>00125ALVIS</a></td><td><p class=target>ALVIS FLORAL</p></td><td><p>108 MAIN STREET</p></td><td><p>RAINELLE</p></td><td><p>WV</p></td><td><p>25962</p></td></tr></div>
<div class=rowhide><tr class=tmenu2><td><a href=CustomerTest.asp?CustNumber=00125ENCHA&Ship=Here class=listlink>00125ENCHA</a></td><td><p class=target>AN ENCHANTED GARDEN</p></td><td><p>620 WHEELING AVE</p></td><td><p>CAMBRIDGE</p></td><td><p>OH</p></td><td><p>43725</p></td></tr></div>
-->

<div class="rowhide"><tr class=tmenu><td><p class="target">A BIT OF NATURE</p></td></tr></div>
<div class="rowhide"><tr class=tmenu><td><p class="target">ACCENT FLORAL</p></td></tr></div>
<div class="rowhide"><tr class=tmenu><td><p class="target">ADAMS COUNTY FLORIST  GIFTS</p></td></tr></div>
<div class="rowhide"><tr class=tmenu><td><p class="target">ALVIS FLORAL</p></td></tr></div>
<div class="rowhide"><tr class=tmenu><td><p class="target">AN ENCHANTED GARDEN</p></td></tr></div>

</table>
</body>
</html>


函数myFunction（）{
var input=document.getElementById（“搜索”）；
var filter=input.value.toLowerCase（）；
var nodes=document.getElementsByClassName（'target'）；
var divsToHide=document.getElementsByClassName（'rowhide'）；
对于（i=0；i
有点自然

亚当斯县花店礼品
阿尔维斯花卉
魔法花园

您只需将脚本放在代码其余部分的下面：




有点自然

亚当斯县花店礼品
阿尔维斯花卉
魔法花园
函数myFunction（）{
var input=document.getElementById（“搜索”）；
var filter=input.value.toLowerCase（）；
var nodes=document.getElementsByClassName（'target'）；
var divsToHide=document.getElementsByClassName（'rowhide'）；
对于（i=0；i

有两件事要做
移除所有
标记外的
。这打破了表格格式。将tr类更改为“tmenu
”

取以下元素var divsToHide=document.getElementsByClassName（'tmenu'）
并修改divsToHide


检查最终代码，
试试这段代码

函数myFunction（）{
var input=document.getElementById（“搜索”）；
var filter=input.value.toLowerCase（）；
var nodes=document.getElementsByClassName（'target'）；
var divsToHide=document.getElementsByClassName（'rowhide'）；
对于（i=0；i




一点自然
221 E SPRING ST
ST MARYS
OH
45885
强调花卉
1330贝克大街
CODY
WV
82414
ADAMS县花店礼品店
209 W MAIN ST
WEST UNION
OH
45693
ALVIS FLORAL
108大街
RAINELLE
WV
25962
魔法花园
620惠灵大道
剑桥
哦
43725
有点自然

亚当斯县花店礼品
阿尔维斯花卉
魔法花园
谢谢高瑟姆。所以我的误解实际上是添加了第二类标签。我不知道我能做到这一点，也不知道如何做到这一点，这让我尝试了div。您的解决方案很简单，甚至没有给我的代码添加太多内容。实际上，我在循环数据时用ASP编写HTML。很高兴我能帮上忙。快乐编码！