Zeilen automatisch ausblenden, wenn keine Abfrage im Suchfeld vorhanden ist

Ich bin völlig neu in der Java-Codierung. Ich habe eine Liste von Konten, die ich verwende, um die richtigen Sammler (mehr als 5000 Zeilen) zu zeigen. Ich habe es mithilfe einiger Online-Hilfe in eine HTML-Webseite umgewandelt.Zeilen automatisch ausblenden, wenn keine Abfrage im Suchfeld vorhanden ist

Jetzt möchte ich, dass, wenn keine Abfrage im Suchfeld gibt es keine Ergebnisse in der unteren Tabelle nur Header sollte angezeigt werden. Sobald ich mit der Eingabe eines beliebigen Kundennamens beginne und wenn es Übereinstimmungen gibt, sollte das angezeigt werden und sobald ich die Abfrage lösche, sollte die Liste verschwinden.

Unten ist der Code, den ich ab sofort verwende.

<!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>

Quelle

2017-07-24 Prateek Vishwas

Hier ist der Link zu der Beispieldatei als Referenz https://drive.google.com/file/d/0B_a89TkNd6sCVGRyNzd6UlI0VDA/view?usp=sharing –

Eine Option besteht darin, alle Zeilen mit einer Klasse in der Tabelle auszublenden, bis Sie eine Änderung in der Box erkennen. Zum Beispiel könnte die Klasse:

.hidden tr+tr{ 
    display: none; 
}

alle tr+tr tut wird alle der tr s sagen, ein tr folgenden wird diese, so dass wir den Header nicht verbergen.

Fügen Sie diese Klasse auf dem Tisch zu starten, dann in der Funktion eine Zeile hinzufügen, wie etwas aussieht:

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

Dies wird dann Dinge verstecken, wenn es keine Eingabe ist und sichtbar macht es einmal etwas in der ist Box.

Quelle

2017-07-24 21:22:59 Don

Dank Don für deine Antwort. Es tut mir leid, dass ich ein Neuling im Coding-Zeug bin. Könnten Sie bitte Ihre Lösung in meinem Code oben oder dem HTML in dem unten angegebenen Link anwenden und mit mir bei [email protected] teilen? https://drive.google.com/file/d/0B_a89TkNd6sCVGRyNzd6UlI0VDA/view –

Ich werde nicht die Arbeit für Sie tun, ich habe gut genug erklärt, wie man es dort hinein bekommt. Du wirst nicht lernen, wenn Leute es für dich tun, füge es einfach hinzu und denke darüber nach, wo es Sinn machen würde. Wenn Sie Fragen dazu haben, was der Code tut, erkläre ich Ihnen gerne. – Don

Danke Don. Ich melde mich bei Ihnen, falls ich weitere Hilfe brauche. Danke vielmals. –

Zeilen automatisch ausblenden, wenn keine Abfrage im Suchfeld vorhanden ist

Antwort

Verwandte Themen