在搜索框中沒有查詢時自動隱藏行

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

來源

2017-07-24 Prateek Vishwas

這裏是鏈接到的樣本文件以供參考 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"); 
}

那麼這將隱藏的東西，當沒有輸入和取消隱藏它一旦有什麼東西在框。

來源

2017-07-24 21:22:59 Don

唐感謝您的回答。我很抱歉，我是編碼方面的新手。您能否將您的解決方案應用於我的上述代碼或下面鏈接中的html中，並在[email protected]與我分享？ https://drive.google.com/file/d/0B_a89TkNd6sCVGRyNzd6UlI0VDA/view –

我不打算爲你做這項工作，我已經很好地解釋瞭如何將它放在那裏。你不會去了解人們是否爲你做這件事，只需添加它，並考慮它將在何處發生。如果您對任何代碼的做法有疑問，我會很樂意解釋。 – Don

謝謝唐。如果我需要進一步的幫助，我會盡快回復您。非常感謝。 –

在搜索框中沒有查詢時自動隱藏行

回答

相關問題