Suchfunktion, die Tabellenzeile ausgibt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ahnung
anzahl
ausgabe
beispiel
code
ergebnis
form
foto
funktion
http
markierung
prinzip
problem
sortieren
spalte
suche
tabelle
treffer
url
zeile
-
Hallo ihr!
Und zwar möchte ich wissen, ob es möglich ist, über eine Suchfunktion einzelne Tabellenzeilen (einer HTML-Tabelle) auszugeben.
Am Beispiel erklärt heißt das, dass es z.B. die Spalten Name, Alter und Wohnort gibt. Für jede Spalte gibt es ein Suchfeld, wo man bei Alter z.B. 20 eingeben kann. Als Ergebnis sollen jetzt alle Zeilen (also wirklich die komplette Zeile, nicht nur die Zelle) ausgegeben werden, wo in der Spalte Alter 20 steht.
Da ich mich mit Javascript nicht wirklich auskenne, weiß ich nicht, ob das Ganze damit überhaupt realisierbar ist - sollte es das tatsächlich sein, wäre eine Beschreibung natürlich nicht schlecht...
Vielen Dank schon mal für eure Antwort(en) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo :)
Ja, soetwas ist mit Javascript realisierbar.
Plan: Alle Datensätze mit Alter usw. werden in ein Javascript-Array ablegt.
Die Ausgabe wird einmal beim Start erzeugt und jedes mal, wenn sich ein Suchfeld verändert.
Dabei können dann während der Ausgabe die Werte verglichen werden und nur die Einträge angezeigt werden, die mit den Kriterien übereinstimmen.
Du schreibst dass du wenig Ahnung von Javascript hast.
Hast du das Prinzip verstanden, welches ich anwenden würde?
Gruß,
dex -
Naja... gaaaaanz grob hab ich das Prinzip verstanden - klingt auf alle Fälle logisch :) , aber wie man das nun praktisch umsetzen kann ist mir noch nicht klar.
Da bräuchte ich wahrscheinlich einen Beispielcode für... -
Hier ein Beispiel:
<script language="Javascript" type="text/javascript"> <!-- var entries = new Array(new Array("Test1",25), new Array("Test2",19)); var listBegin = "<table><tr><th>Name</th><th>Alter</th></tr>", listEnd = "</table>"; function printList(searchKey) { var i, x; var list = ""; if(searchKey == "") { for(i=0;i<entries.length;i++) { list += "<tr>"; for(x=0;x<entries[i].length;x++) { list += "<td>"+entries[i][x]+"</td>"; } list += "</tr>"; } } else { var match; for(i=0;i<entries.length;i++) { match = false; for(x=0;x<entries[i].length;x++) { if(entries[i][x] == searchKey) { match = true; break; } } if(match) { list += "<tr>"; for(x=0;x<entries[i].length;x++) { list += "<td>"+entries[i][x]+"</td>"; } list += "</tr>"; } } } document.getElementById("listContainer").innerHTML = listBegin+list+listEnd; } //--> </script> <body onload="printList('');"> Nach Alter suchen: <input type="text" onkeydown="printList(this.value);" onkeyup="printList(this.value);" onkeypress="printList(this.value);" onchange="printList(this.value);"> <div id="listContainer"> </div> </body>
Getestet, funktioniert.
Wenn du nun noch Suchtreffer haben möchtest, die Zeichen des Suchwortes enthalten, dann muss da noch ein bisschen was dazu ;)
Aber das wäre eine Lösung für deine Frage.
Gruß,
dex
Beitrag zuletzt geändert: 15.2.2010 17:43:22 von qap2 -
planepictures schrieb:
Naja... gaaaaanz grob hab ich das Prinzip verstanden - klingt auf alle Fälle logisch :) , aber wie man das nun praktisch umsetzen kann ist mir noch nicht klar.
Da bräuchte ich wahrscheinlich einen Beispielcode für...
Also möchtest du jetzt nur einen teil ausgeben?
Oder einfach nur die Tabelle sortiert haben?
Wenn letzteres , dann schau mal nach sorttable
Now, how to use it. To make a table of your choice sortable, there are three steps:
1. Download the Javascript library
2. Include the Javascript library, by putting a link to it in the HEAD of your page, like so:
<script src="sorttable.js"></script>
3. Mark your table as a sortable one by giving it a class of "sortable":
<table class="sortable">
Note that the library's JavaScript file is called sorttable (two Ts), but the class you add to the table is sortable (one T).
And that's all you need. Your table will now have column sorting available by clicking the headers.
Edit: Dir ist hoffentlich klar das User ohne javascript dann diese Funktion nicht haben?
Möglich ist das Sortieren nämlich auch mit php (php ist geradezu geschaffen dafür)
Beitrag zuletzt geändert: 15.2.2010 17:59:23 von simuliertes -
@ simuliertes: wüsste nicht, dass ich was von sortieren geschrieben habe
@ dex: japp - das ist von der Funktion her genau das, was ich gesucht habe - insofern kann ich dir nur danken
Allerdings hab ich ja da keine HTML-Tabelle mehr im herkömmlichen Sinne. Die Tabelle selbst existiert ja schon und ist mit CSS formatiert, was ich eigentlich so beibehalten wollte - auch der Übersichtlichkeit wegen.
Meine erste Überlegung (ohne eine Ahnung von javascript zu haben) war ja, dass man jeder Tabellenzeile eine ID gibt und bei Übereinstimmung der Eingabe mit dem Inhalt der Tabellenzeile, die ID (also die Zeile) ausgegeben wird - keine Ahnung, ob das umsetzbar ist.
Aber vielleicht gibt es ja doch noch eine andere Möglichkeit, bei welcher die HTML-Tabelle in ihrer Form erhalten bleibt...(?) -
Nagut ich habe auch mal ein paar Zeilen Code geschrieben:
<html> <head> <title>Tabellensuche</title> <SCRIPT type="text/javascript"> <!-- function such(suchwort) { var dt_TR_nodes=document.getElementById('datentabelle').getElementsByTagName('TR'); var abfrage=eval("/"+suchwort+"/"); var foundsomething=0; for(a=0;a < dt_TR_nodes.length;a++) { if (dt_TR_nodes[a].hasChildNodes) { var dt_TD_nodes=dt_TR_nodes[a].childNodes; var ZeilenDaten = ''; //alert(dt_TR_nodes[a].nodeName) for(b=0;b < dt_TD_nodes.length; b++) { //alert( dt_TD_nodes[b].nodeName) if (dt_TD_nodes[b].innerHTML != undefined) ZeilenDaten += ' '+dt_TD_nodes[b].innerHTML; } //alert('ZD: '+ZeilenDaten); var Ergebnis = ZeilenDaten.search(abfrage); if (Ergebnis != -1) { alert('Suchwort wurde gefunden in Zeile nr. '+(a+1)+'\nInhalt:\n'+ZeilenDaten); foundsomething+=1; } } } if (foundsomething==0) alert('Es wurde leider nichts gefunden'); } --> </SCRIPT> </head> <body> <form action=""> <input type="Text" name="suchfeld" size="10" value=""> <input type="Button" name="" value="suchen" onKeyUp="such(this.form.suchfeld.value)" onMouseUp="such(this.form.suchfeld.value)"> </form> <table cellspacing="1" cellpadding="1" border="1" id="datentabelle"> <tr> <td>20</td> <td>franz</td> <td>kafka</td> </tr> <tr> <td>19</td> <td>helmut</td> <td>schmidt</td> </tr> <tr> <td>17</td> <td>Donald</td> <td>Duck</td> </tr> </table> </body> </html>
hier als Demo zu bewundern
Die alert()-Ausgabe ist natürlich nicht so toll das sollte anders laufen und es besteht noch der "Fehler" das keine oder 1(!) Leerzeichen in allen Zeilen zu Treffern führen...
Ist es das was Du suchst?
Ansonsten solltest DU vielleicht mal den Code Deiner Tabelle posten.
Wie immer: javascript wird nicht von allen Browsern immer unterstützt, besser wäre natürlich eine php-Lösung
Beitrag zuletzt geändert: 15.2.2010 21:54:14 von simuliertes -
Ja - das ist schon das, was ich suche - nur eben, wie du schon selbst schreibst, ist die alert()-Ausgabe ungünstig.
Wenn das Problem mit php zu lösen ist, nehme ich das natürlich auch - hauptsache es funktioniert ;)
Hier mal das wichtigste vom bisherigen Code (Tabelle ist gekürzt):
<html> <head> <link rel="stylesheet" href="logbook_style.css" type="text/css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <script> $(document).ready(function() { $("#logbook_table").tablesorter({ cssHeader: "header" }); }); </script> </head> <body link="#325887" alink="#325887" vlink="#325887"> <table width="75%" frame="void" align="center" id="logbook_table"> <p class="main_title">Logbook</p> <thead> <tr class=table_title> <th>Datum</th> <th>Airport</th> <th>Registrierung</th> <th>Airline</th> <th>Flugzeugtyp</th> <th>Foto</th> </tr> </thead> <tbody> <tr class=DZ> <td>31.01.2010</td> <td>EDDP</td> <td>D-AVRF</td> <td>Lufthansa Regional (CityLine)</td> <td>British Aerospace Avro RJ85</td> <td><a href="http://planepictures.lima-city.de/2010/310110/d-avrf.html">ja</a></td> </tr> <tr class=DZ> <td>31.01.2010</td> <td>EDDP</td> <td>N270WA</td> <td>World Airways</td> <td>McDonnell Douglas MD-11</td> <td><a href="http://planepictures.lima-city.de/2010/310110/n270wa.html">ja</a></td> </tr> <tr class=DZ> <td>31.01.2010</td> <td>EDDP</td> <td>OO-DLC</td> <td>DHL (European Air Transport)</td> <td>Airbus A300B4-200</td> <td><a href="http://planepictures.lima-city.de/2010/310110/oo-dlc.html">ja</a></td> </tr> </tbody> </table> </body> </html>
So sieht das Ganze aus... -
planepictures schrieb:
Ja - das ist schon das, was ich suche - nur eben, wie du schon selbst schreibst, ist die alert()-Ausgabe ungünstig.
Wenn das Problem mit php zu lösen ist, nehme ich das natürlich auch - hauptsache es funktioniert ;)
Also gut. Deine suche hat mich motiviert den Code ein bisschen zu verfeinern.
Guckste hier nochmal den selben Link mit verbessertem Code
Im <form>-tag könntest Du übrigens hinter action= , eine Beliebige Seite notieren wo alle user die kein javascript aktiviert haben beim drücken auf "suche" hingeleitet werden.
Im idealfall wäre das dann eine php-suche/serverseitige suche.
Vielleicht wirst Du ja fündig.
Wenn nicht, wäre es zu empfehlen wenn Du dann wenigstens zu einer Seite leitest ,die einen nett formulierten Hinweis beinhaltet das die suche nur mit aktiviertem javascript funktioniert.
"#" bedeutet selbe seite, für den user ohne Javascript würde nur die Seite neu geladen, was er/sie u.u. nicht einmal mitbekommt (es passiert "nichts").
Die Suche ist nicht case-sensitiv (=Groß-Kleinschreibung egal) und findet manchmal mehr als man will ^^
Wenn Du z.B. mal "City" eingibst wird das in jeder Zeile gefunden.
Hat mich erst sehr gewundert, bis ich drauf gekommen bin das die such ja auch in den Links der Fotos sucht.
Also lima-city
Falls Du die suche noch "intelligenter" gestalten willst , beschäftige dich mit Regular expressions und ändere die Suchabfrage in Zeile 11 entsprechend.
Beitrag zuletzt geändert: 16.2.2010 14:28:12 von simuliertes -
Das ist echt super! Funktioniert auch ganz wunderbar - vielen Dank!
Das Optimum wäre natürlich noch, wenn das Ganze ohne Markierung auskommt und eben nur die betreffenden Zeilen angezeigt werden (bzw. die nicht passenden ausgeblendet werden) - aber auch in der jetztigen Form werde ich das Script auf alle Fälle übernehmen :)
Ich hab nur den "trefferText" ausgebaut, da die Ausgabe der Anzahl der Treffer und die Markierung ausreicht. -
planepictures schrieb:
Das ist echt super! Funktioniert auch ganz wunderbar - vielen Dank!
Das Optimum wäre natürlich noch, wenn das Ganze ohne Markierung auskommt und eben nur die betreffenden Zeilen angezeigt werden (bzw. die nicht passenden ausgeblendet werden) - aber auch in der jetztigen Form werde ich das Script auf alle Fälle übernehmen :)
Ich hab nur den "trefferText" ausgebaut, da die Ausgabe der Anzahl der Treffer und die Markierung ausreicht.
Dann ändere folgende Zeilen:
if (Ergebnis != -1) { foundsomething+=1; //Gefundene Zeile mit der Markerfarbe Markieren //dt_TR_nodes[a].style.backgroundColor=MarkerFarbe; dt_TR_nodes[a].style.display= ""; //Treffer in einem Text Speichern trefferText += ZeilenDaten+'<br>'; }else{ //dt_TR_nodes[a].style.backgroundColor=standartfarbe; dt_TR_nodes[a].style.display= "none"; }
Du kannst ja anscheinend css.
Wenn Du DIr den code an dieser stelle genauer anschaust fällt dir vielleicht auf das ich dort die css-eigenschaften der <TR>-Elemente ändere.
Einfach mal ein bisschen rumspielen
Beitrag zuletzt geändert: 16.2.2010 16:14:51 von simuliertes -
keine ahnung aber hast du mal an eine mysql datenbank gedacht ? wenn du die grundstruktur deiner tabelle anpasst. also mit php einfach eine while abfrage kannst du die einzelnen spalten somit eintragen und auf per php auslesen ... weis nicht ob dir das was bringt , aber mit php/mysql geht alles leichter auch kaffee kochen
-
Ja... über mysql habe ich schon nachgedacht und mich versucht zu informieren, aber leider fehlt mir da etwas die Zeit und auch die Geduld, mich einzuarbeiten - daher war dies für mich persönlich die einfachere Lösung (für meine kleine Website allemal ausreichend).
Die letzte Lösung von simuliertes setzt meine Vorstellung sehr gut um, weshalb ich dir und natürlich auch dex sehr für eure Bemühungen danken möchte! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
