Javascript Tabelle filtern

[whine]

Guten Morgen,

ich komme von einer index.html auf eine Seite tabelle.html und habe in der URL einen Parameter id (tabelle.html?id=123).

Auf der tabelle.html gibt es eine Tabelle, etwa so:

<table> 
 <tr> 
  	<th>ID</th> 
  	<th>Name</th> 
 </tr> 
<tr> 
 	<td>1</td> 
 	<td>Meier</td> 
</tr>
<tr> 
 	<td>2</td> 
 	<td>Müller</td> 
</tr>
<tr> 
 	<td>123</td> 
 	<td>Schulz</td> 
</tr>
<tr> 
 	<td>...</td> 
 	<td>...</td> 
</tr>
</table>

[Ergänzung GB: Genau genommen ist die Tabelle eine statische XML-Datei, welche ich mit XSLT zur zur Anzeige bringe.]

Den Wert des Parameters aus der URL greife ich mit Javascript in einer Variablen param ab. Kennt jemand eine Möglichkeit, mit document.getElementById('id').style.display = 'block' bzw. 'none' nur die Zeile mit der übergebenen id auszugeben?

Gruß whine

[dedlfix]

Tach!

Kennt jemand eine Möglichkeit, mit document.getElementById('id').style.display = 'block' bzw. 'none' nur die Zeile mit der übergebenen id auszugeben?

So jedenfalls nicht, weil dein gezeigtes HTML keine IDs mit dem übergebenen Werten hat. Sie sind lediglich Inhalt und als solchen musst du den dann auch auswerten. Zunächst kannst du alls tr innerhalb der Tabelle selektieren. document.querySelectorAll('tr') beispielsweise, wenn es sich um die einzige Tabelle in der Seite handelt. Ansonsten musst du den Selector spezifischer wählen. Durch diese Liste läufst du durch und ermittelst den Inhalt vom ersten td. Je nachdem kannst du dann hidden im aktuellen tr setzen oder auch nicht. Das hidden gibts als eigenständiges Attribut, da muss man nicht den Style bemühen, was aber auch geht.

dedlfix.

[Gunnar Bittersmann]

@@whine

Den Wert des Parameters aus der URL greife ich mit Javascript in einer Variablen param ab.

Warum JavaScript?

Du überträgst Unmengen von Daten, die gar nicht angezeigt werden sollen‽ Da ist es doch besser, die Filterung serverseitig (bspw. PHP) vorzunehmen und nur die Daten der einen Zeile zu übertragen, die den Nutzer interessiert.

LLAP 🖖

[beatovich]

hallo

Du überträgst Unmengen von Daten, die gar nicht angezeigt werden sollen‽ Da ist es doch besser, die Filterung serverseitig (bspw. PHP) vorzunehmen und nur die Daten der einen Zeile zu übertragen, die den Nutzer interessiert.

Genauer: Die Übertragung der Ressource und Verhinderung des Cache wird getriggert durch die Verwendung des QueryString.

Das könnte man vermeiden, indem man statt dessen Fragment-Identifier verwendet also

table.html#dataID

Dass die Tabelle als Ganzes einmal übetragen wird, kann man je nach Umfang noch verschmerzen.

[Gunnar Bittersmann]

@@beatovich

table.html#dataID

Dass die Tabelle als Ganzes einmal übetragen wird, kann man je nach Umfang noch verschmerzen.

Dass man mit fragment identifier im URI nicht am Seitenanfang landet, sondern das Element mit dieser ID (sofern vorhanden) oben im Viewport ist, kann man evtl. weniger verschmerzen.

LLAP 🖖

[whine]

Hi dedlfix und Gunnar!

Genau genommen ist die Tabelle eine statische XML-Datei, welche ich mit XSLT zur zur Anzeige bringe.

Mit <tr id="{id}"> im Template bekomme ich <tr id="123"> im HTML. Mein Problem ist die Übergabe des URL-Parameters zum Ausblenden aller anderen Zeilen.

Serverseitige Lösung ist keine Option, da ich nur FTP-Zugriffsrechte auf den Server habe :-/

whine

[Tabellenkalk]

Hallo,

Serverseitige Lösung ist keine Option, da ich nur FTP-Zugriffsrechte auf den Server habe :-/

Die sollten genügen, um eine entsprechende php-Datei hochzuladen…

Gruß
Kalk

[Gunnar Bittersmann]

@@whine

Genau genommen ist die Tabelle eine statische XML-Datei, welche ich mit XSLT zur zur Anzeige bringe.

Die Transformation läuft wo? Auf dem Server, d.h. es wird das generierte HTML übertragen? Oder clientseitig, d.h. es werden die XML-Rohdaten übertragen?

Wenn letzteres, kannst du die Filterung bei der Transformation gleich mit erledigen.

LLAP 🖖

[whine]

Die Transformation läuft clientseitig. Ich würde die Filterung ja gerne gleich bei der Transformation erledigen, es hapert leider an der Parameterübergabe.

Ich würde gerne so etwas wie:

<xsl:template match="book_entry">
<xsl:if test="id = param">
	<tr id="{id}"
	  <td>
		<xsl:value-of select="isbn"/>
	  </td>
...

machen, wobei param über die URL kommt.

Wenn nichts über die URL mitgegeben wird, soll die ganze Tabelle sichtbar sein.

[Gunnar Bittersmann]

@@whine

Die Transformation läuft clientseitig. Ich würde die Filterung ja gerne gleich bei der Transformation erledigen, es hapert leider an der Parameterübergabe.

Da wäre ThomasM der richtige. Ich hab mal XSL als Tag ergänzt, veilleicht wird er auf diesen Thread aufmerksam.

LLAP 🖖

[Gunnar Bittersmann]

@@whine

Mit <tr id="{id}"> im Template bekomme ich <tr id="123"> im HTML.

Ich hab da mal was gebastelt. Jede Tabellenzeile hat eine --id (es müssen Zahlen sein) und für die Tabelle wird der --filter angegeben, welche Zeile zu sehen sein soll. Und das mit custom properties – mit denen kann man rechnen.

Es wird die Differenz --diff zwischen --id und --filter berechnet; für die Zeile, die zu sehen sein soll, kommt 0 raus, für alle anderen irgendein anderer Wert. Der Trick ist nun, --diff durch sich selbst zu teilen. Bei allen Zeilen, die ausgeblendet werden sollen, kommt 1 raus. Davon 1 abgezogen und als Höhe zugewiesen und schwupps sind die Zeilen weg (zumindest visuell). Bei der einen auserwählten Zeile geht die Division durch 0 nicht; es wird kein sinnvoller Wert für die Höhe zugewiesen und damit bleibt diese Zeile so wie sie ist.

Das ist aber nicht mehr als ein proof of concept; beileibe keine Lösung, denn:

• die Ausblendung erfolgt nur visuell; Screenreader lesen weiterhin alles vor

• der Wert für --filter muss ja irgenwie ins Markup kommen – durch Scripting. Dann kann das Script aber auch gleich das Ausblenden der Tabellenzeilen (hidden) übernehmen.

Mein Problem ist die Übergabe des URL-Parameters zum Ausblenden aller anderen Zeilen.

Eben.

LLAP 🖖