在搜索框中没有查询时自动隐藏行

问题描述：

我对Java编码完全陌生。我有一个帐户清单，我用它来显示正确的收集器（超过5000行）。我已经使用一些在线帮助将其转换为HTML网页。在搜索框中没有查询时自动隐藏行

现在我想，当在搜索框中没有查询时，下表中不应该有任何结果，只有标题应该出现。只要我开始输入任何客户名称，并且如果有任何匹配，就会显示出来，只要我删除查询，列表就会消失。

以下是我目前使用的代码。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
* { 
    box-sizing: border-box; 
} 

#myInput { 
    background-image: url('/css/searchicon.png'); 
    background-position: 10px 10px; 
    background-repeat: no-repeat; 
    width: 26%; 
    font-size: 16px; 
    padding: 12px 20px 12px 40px; 
    border: 1px solid #ddd; 
    margin-bottom: 12px; 
} 

#myTable { 
    border-collapse: collapse; 
    width: 100%; 
    border: 1px solid #ddd; 
    font-size: 12px; 
} 

#myTable th, #myTable td { 
    text-align: left; 
    padding: 2px; 
} 

#myTable tr { 
    border-bottom: 1px solid #ddd; 
} 

#myTable tr.header, #myTable tr:hover { 
    background-color: #f1f1f1; 
} 
</style> 
</head> 
<body> 
<img src="res/logo.jpg" style="width:350px;height:100px;"> 

<h2><font face="Arial" color="#c11919">Collector Lookup Tool - Test Phase</font></h2> 

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for customer names" title="Type in a name"> 
<table id="myTable"> 
    <tr class="header"> 
    <th style="width:20%;">Customer Name</th> 
    <th style="width:10%;">Collector Name</th> 
    <th style="width:15%;">Collector e-mail</th> 
    <th style="width:10%;">Region</th> 
    <th style="width:20%;">Telnet</th> 
    </tr> 
<tr><td>110 Technology LLC</td><td>Abhishek Yadav</td><td>[email protected]</td><td>Americas</td><td>2684227</td></tr> 
<tr><td>14 WFIE TV</td><td>Abhishek Yadav</td><td>[email protected]</td><td>Americas</td><td>2684227</td></tr> 
<tr><td>2Wire Inc</td><td>Abhishek Yadav</td><td>[email protected]</td><td>Americas</td><td>2684227</td></tr> 
<tr><td>3 Phoenix LLC</td><td>Abhishek Yadav</td><td>[email protected]</td><td>Americas</td><td>2684227</td></tr> 
<tr><td>3 Sixty Mfg</td><td>Abhishek Yadav</td><td>[email protected]</td><td>Americas</td><td>2684227</td></tr> 
<tr><td>3D at Depth LLC</td><td>Abhishek Yadav</td><td>[email protected]</td><td>Americas</td><td>2684227</td></tr> 
. 
. 
. 
. 
. 
. 
</table> 

<script> 
function myFunction() { 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 
    for (i = 0; i < tr.length; i++) { 
    td = tr[i].getElementsByTagName("td")[0]; 
    if (td) { 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
    }  
    } 
} 
</script> 
</body> 
</html>

这里是链接到的样本文件以供参考 https://drive.google.com/file/d/0B_a89TkNd6sCVGRyNzd6UlI0VDA/view?usp=sharing –

答

一个选项是使用表上的类隐藏所有行，直到您检测到框中的更改。例如，类可能是：

.hidden tr+tr{ 
    display: none; 
}

所有tr+tr正在做的是说所有的tr小号跟随tr的，这是所以我们不隐藏标题。

添加这个类在桌子上开始，然后在函数中添加一条线，看起来像：

if(filter == ''){ 
    table.classList.add("hidden"); 
} else { 
    table.classList.remove("hidden"); 
}

那么这将隐藏的东西，当没有输入和取消隐藏它一旦有什么东西在框。

唐感谢您的回答。我很抱歉，我是编码方面的新手。您能否将您的解决方案应用于我的上述代码或下面链接中的html中，并在[email protected]与我分享？ https://drive.google.com/file/d/0B_a89TkNd6sCVGRyNzd6UlI0VDA/view –

我不打算为你做这项工作，我已经很好地解释了如何将它放在那里。你不会去了解人们是否为你做这件事，只需添加它，并考虑它将在何处发生。如果您对任何代码的做法有疑问，我会很乐意解释。 – Don

谢谢唐。如果我需要进一步的帮助，我会尽快回复您。非常感谢。 –

在搜索框中没有查询时自动隐藏行

相关推荐