nicht angemeldet
Inhalt von Tabellen interaktiv verändern
Hallo allerseits!
Ich bin auf der Suche nach einer Lösung, Antwort, Tipp,... zu folgendem Problem.
Für unser kleines Firmenintranet möchte ich auf einer simplen HTML-Seite eine Tabelle abbilden, die veränderbaren (interaktiven) Inhalt von bestimmten Zellen aufweist. Derzeit ist bei uns der IE8 installiert. Der verfügbare, editierbare Bereich befindet sich in einem Frame des Intranets, weshalb ich keine weitere Seite aufrufen möchte.
Was soll genau passieren:
Die Tabelle besteht bspw. aus drei Spalten und zwei Zeilen, wobei die untere Zeile nur aus einer Zelle besteht. In dieser Zelle sollen sich Informationen wie z.B. Dokumente, Anweisungen und Kontaktdaten als Text oder Hyperlink zu den entsprechenden Dokumenten befinden. In der Zeile darüber soll durch einen Klick auf ein Symbol oder eine Überschrift in der unteren Zelle ein Switch zwischen den Informationen bewirkt werden (z.B. von Anweisungen zu Templates und bei erneutem Klick wieder zurück).
Lässt sich soetwas mit HTML überhaupt umsetzen oder muss ich dabei auf andere Sprachen zurückgreifen? Und: nach welchen Schlagworten kann ich dafür suchen?
Vielen Dank und viele Grüße,
knubibert
-
Hallo,
Lässt sich soetwas mit HTML überhaupt umsetzen oder muss ich dabei auf andere Sprachen zurückgreifen? Und: nach welchen Schlagworten kann ich dafür suchen?
Wenn ich dich richtig verstanden habe, dann reicht reines HTML nicht aus. Du kannst z.B. alle Informationen ausliefern, aber manche davon aber nur versteckt, indem du ihnen eine entsprechende Klasse gibst. display und visibility für den entsprechenden CSS-Selektor sind hier die Schlagworte. Per JavaScript kannst du nun die Klasse der Elemente dynamsich ändern.
Ein Beispiel hier im Archiv als Ansatz. Beachte, dass es besser ist die Klasse zu wechseln als nur die CSS-Eigenschaft.
Eine Alternative wäre das dynamische nachladen von Inhalten mit AJAX. Scheint mir aber in deinem Fall überdimensioniert. Kannst du aber auch mal als Schlagworte aufgreifen.
Viele Grüße
Siri -
Hallo,
mit HTML allein kannst du keine interaktiven Seiten gestalten. Das was gezeigt wird, ist nicht veränderbar, bestenfalls die Größe der Schrift durch den Browser.
Mit CSS kannst du Inhalte verbergen und beim Übermausen (mouseover) anzeigen - oder umgekehrt. Aber die Inhalte kannst du nicht ändern.
Mit Javascript geht einiges mehr. Du kannst Cookies schreiben und beim nächsten Aufruf der Seite wieder lesen, aber nur für denselben Arbeitsplatz und Browser. Du kannst aber auch Inhalte nachladen und anzeigen (Text, Bilder). Aber keine Inhalte so ändern, dass andere Benutzer die Änderungen lesen könnten.
Mit einer Serversprache wie PHP kannst du Formulare entgegennehmen, deren Inhalte in Dateien oder Datenbanken speichern und an andere Benutzer wieder ausliefern.
Gast
-
Der Hinweis auf JS war richtig.
Hier mal ein ganz primitives Beispiel, dass aber auch "verry oldstyled" ist. Dafür ist es leicht zu durchschauen (also abzuändern) und performant:
<html> <head> <title>Test</title> <script type="text/javascript">var itemname=new Array('Bitte wählen', 'foo', 'bar'); var itemtext=new Array('Noch nichts gewählt', 'foo wurde gewählt', 'bar wurde gewählt'); function givIt() { gewaehlt=document.forms['f_1'].elements['s_1'].value; document.getElementById('ausgabe').innerHTML=text[gewaehlt]; }</script> </head> <body> <h1>Test</h1> <form name="f_1"> <select name="s_1" onchange="givIt()"> <script type="text/javascript">for (i=0; i<itemtext.length; i++) { document.write('<option value="' + i + '">' + itemname[i] + '</option>') }</script> </select> <div id='ausgabe'>Noch nichts gewählt.</div> </body> </html>Zur Erläuterung:
Die Zeilen
var itemname=new Array('Bitte wählen', 'foo', 'bar'); var itemtext=new Array('Noch nichts gewählt', 'foo wurde gewählt', 'bar wurde gewählt');enthalten die Daten, die später verwendet werden. Die können aus einer Datenbank stammen und es macht gar nichts aus, wenn die danach z.B. so aussehen:
var itemname=new Array( 'Bitte wählen', 'foo', 'bar' );Das Formular und die Select-Box bekommen einen Name zur Adressierung:
<form name="f_1"> <select name="s_1" onchange="givIt()">wird die Select-Box geändert, so wird die selbst definierte Funktion givIt() aufgerufen.
Wenn die Seite geladen wird, dann wird dieser Teil ausgeführt:
for (i=0; i<itemtext.length; i++) { document.write('<option value="' + i + '">' + itemname[i] + '</option>') }Damit bekommt die Select-Box den Inhalt geschrieben.
Für jede Zahl i von 0 , solange i kleiner als die Datenmenge. Schreibe <option wert=i>den zugehörigen Text aus dem Array 'itemname', dann </option>. Erhöhe i um 1 und mache das nochmal.Der Bereich, in den ausgegeben wird, der bekommt eine ID und einen Inhalt, der beim Start angezeigt wird:
<div id='ausgabe'>Noch nichts gewählt.</div>Wenn jetzt eine Auswahl durchgeführt wurde wird die (eigene) Funktion givIt() ausgeführt.
Die ermittelt welches Item ausgewählt wurde und wählt dann den entsprechenden Text aus dem Array aus und schreibt ihn in den mit der ID 'ausgabe' eindeutig identifizierten div.
-
Da hat sich ein Fehlerchen eingeschlichen. Selbstverständlich muss es heißen:
function givIt() { gewaehlt=document.forms['f_1'].elements['s_1'].value; document.getElementById('ausgabe').innerHTML=itemtext[gewaehlt]; }Ach hatte den Array 'text' beim Posten nachträglich 'itemtext' umbenannt und eine Stelle vergessen, an der er auch benutzt wurde.
Jörg Reinholz
-