• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] HTML Table über SELECT filtern

S

squali

New member
Hallo Leute ich bin neu hier und brauch dringend eure Hilfe.

Folgende Ausgangssituation:
-Tabelle mit Inhalten
-Select Box

Wenn ich jetzt im Select einen Wert auswähle möchte ich dass nur die Reihen in der Tabelle angezeigt werden
die diesen Wert beinhalten.

Select: Steffan
Christian
John


Tabelle:
Nachname | Vorname | Alter
Steffan Mustermann 23
Cristian Mustermann 45
John Mustermann 54
Steffan Mustermax 39

Also wenn ich im Select jetzt Steffan wähle erhalte ich nurnoch die zwei Reihen
 
Hi,

herzlich Willkommen bei uns.

Ist das eine Datenbank Anwendung? Wenn dem so wäre, könntest du das wunderbar Serverseitig lösen. Ich würde dann das Formular per onchange (SELFHTML: JavaScript / Sprachelemente / Event-Handler) abschicken, mit einem Parameter (zb. der ID). Diesen Parameter könnte man dann auswerten und entsprechend die Inhalte rendern.

Clientseitig, also per Javascript ist das nicht so schön lösbar. Dort müsste man dann ebenfalls das onchange Objekt abfangen und entsprechend die Inhalte ändern (Die nicht benötigten eventuell ausblenden). Aber wie gesagt, Serverseitig wäre das einfacher. Muss es JS sein?


Gruß
 
Ja ist es. Per JavaScript wird die Access Datenbank ausgelesen und in die Tabelle geschrieben.
Ich habe Skripte gefunden die das durch eine Suchfunktionen lösen aber ich hätte gerne eine vorgefertigte Auswahl(Select)

Es geht eigentlich wirklich nur um eine benötigte Funktion in JavaScript, der Rest steht schon.

Mir wäre auch eine andere Sprache lieber nur landet das ganze später auf einem MS Sharepoint der glaube ich z.B. PHP
(mal abgesehen davon dass ich mich damit noch nie beschäftigt habe) nicht unterstützt.

Gruß
 
squali schrieb:
Es geht eigentlich wirklich nur um eine benötigte Funktion in JavaScript, der Rest steht schon.
Zum Vergrößern anklicken....
D.h. du musst jetzt nur noch den Kram auslesen und an ein Script übergeben?

Dann wie oben gesagt, per onsubmit abfangen und dann z.B. einen Ajax-Request starten, ID oder was anderes, z.B. Vornamen als Parameter übergeben. Alles andere sollte ja dann das Serverseitige Script machen. Zum Schluss Seite neu laden und neuen Inhalt anzeigen.
 
Also die Funktion müsste quasi die Select Box auslesen und in der Tabelle prüfen ob der "Wert" vorhanden ist und dann nur die Zeilen in
denen sich der "Wert" befindet ausgeben (oder natürlich mehrere). Den Rest dementsprechend ausblenden funktioniert ja bei der Suchfunktion auch wunderbar.

Ich glaub da muss ich mich mal morgen durchwühlen da ich mit Ajax auch noch nicht gearbeitet habe. Hoffe auch dass es dann unterstützt wird.

Hättest du da ein Beispiel für mich? Danke schonmal!
 
squali schrieb:
Also die Funktion müsste quasi die Select Box auslesen und in der Tabelle prüfen ob der "Wert" vorhanden ist und dann nur die Zeilen in
denen sich der "Wert" befindet ausgeben (oder natürlich mehrere).
Zum Vergrößern anklicken....
Genau.

onchange auf das select-Tag setzen und diesem eine Funktion (aendere()) angeben (Habe jetzt leider nur JQuery Code parat, aber so ähnlich geht das auch mit Plain JS. Einfach mal ein bisschen nach Googlen...):
Code: 
function aendere() {
$.ajax({
			// url welche beim request aufgerufen wird
                        url: "...?id=1", // 1 = ID von Steffan
			success: function(data) {
                                // aufruf hat funktioniert und der request ist fertig
                                // neue Daten aus data auslesen und in altes select packen
				$("select").html($(data).find("select").html());
			}
		});
}
 
Zuletzt bearbeitet:
Das kann man auch alles komplett mit JS machen und braucht dann keinen zusätzlichen Request. Gib' den <td>s einfach ein data-*-Attribut, in dem der Wert der Zelle drin steht. Im JS gehst du dann durch alle Zeilen durch und holst dir alle verschiedenen Werte raus. Daraus baust du dir dann deine <option>s für das <select> zusammen. Im onchange des <select> gehst du dann wieder alle Zeilen durch und vergleichst den Wert des <select>s mit dem Wert, der im data-*-Attribut drin steht.

In etwa so:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js?modules=table"></script>
<script type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>
<table id="namen">
	<thead>
		<tr>
			<th data-selectable="1">Vorname</th>
			<th>Nachname</th>
		</tr>
	</thead>
	<tbody>
		<tr><td data-value="Steffan">Steffan</td><td>Meier</th></tr>
		<tr><td data-value="Stephan">Stephan</td><td>Meier</th></tr>
		<tr><td data-value="Stefan">Stefan</td><td>Meier</th></tr>
		<tr><td data-value="Steffan">Steffan</td><td>Huber</th></tr>
		<tr><td data-value="Steffan">Steffan</td><td>Kritschinev</th></tr>
		<tr><td data-value="Stephan">Stephan</td><td>Huber</th></tr>
	</tbody>
</table>
<script type="text/javascript">
kkjs.table.selectable(kkjs.$("namen"));
</script>
</body>
</html>
- die interessante JS-Datei ist hier: http://kkjs.kkapsner.de/modules/kkjs.table.js - Funktion selectable()
 
Zuletzt bearbeitet:
WOW danke schonmal dafür!!

jetzt muss ich ganz blöd fragen ... wie führ ich das Teil aus?
Ich hab versucht die Funktion bei einem onchange im Select auzuführen aber es passiert nichs :\

Ich muss sie schon mit function() aufrufen oder? Wieso eigentlich das "Klammer auf" vor function?
 
Zuletzt bearbeitet:
Das Teil kannst du nur verwenden, wenn du auch mein Framework verwendest... war als Leitfaden gedacht. Schau' dir einfach mal genauer an, was da in der Funktion selectable() gemacht wird (da wird z.B. der onchange-Eventlistener gesetzt). Wenn was nicht klar ist, frag' einfach nach.

Die Klammer ganz am Anfang ist dafür zuständig, dass ich die Scopefunktion direkt aufrufen kann und der JS-Parse weiß, dass ich hier ein Funktionexpression und keine Funktionsdeklatation hab. Ganz am Ende der Datei ist ein "}())"...
 
Wie ich das jetzt mit dem Select umsetze. Ich muss ja die Funktion in den onchange schreiben. Also so: onchange="Function()" oder nicht? Zumindest funktioniert das so nicht :\

Oder muss ich das wegen dieser Scopefunktion anders machen?
 
Hast du jetzt das Script von kkapsner eingebaut?

Ansonsten zeigst uns bitte mal deinen Code, dann können wir dir eventuell weiter helfen.

Im Allgemeinen sollte das mit onchange=ich_bin_ein_funktions_name() funktionieren.
 
Wie du im Code oben siehst, hab' ich weder ein <select> noch ein onchange im HTML-Code. Das erzeuge ich alles im JS direkt selbst. Ich sage der Funktion nur, welche Tabelle bearbeitet werden soll. Der Rest läuft über data-Attribute.

Schau' dir die verlinkte JS-Datei einfach nochmal an - hab' noch ein paar Kommentare hinzugefügt...

Wenn du hängst, sag' bitte, wo du genau hängst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben