• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Formular verschwindet

S

sin777

Neues Mitglied
Hallo, ich habe zwei Eingabefelder und einen Button. Ich möchte, dass wenn der Button gedrückt wird, die beiden Einträge einer Tabelle hinzugefügt werden.
Ich löse von einem "reset" button ein onClick-Event auf, dass eine Funktion startet. in dieser Funktion wird dann die Tabelle gezeichnet und die Werte ausgelesen.

Mein Problem: Das Formular verschwindet, wenn ich die Funktion aufrufe und man sieht nur noch die Tabelle. Woran liegt das? Kann man die Tabelle hinten einfach anhängen?#

Hier noch der zugehörige code:
HTML: 
<html>
    <head>
        <script type="text/javascript">
            var arr = new Array();

            function entries(name, note) {
                arr[name] = note;
                document.write("<table style=\"border: 5px double black;\">");
                    for(scholar in arr) {
                        document.write("<tr>");
                        document.write("<td>" + scholar + "</td>");
                        document.write("<td>" + arr[scholar] + "</td>");
                        document.write("</tr>");
                    }
                document.write("</table>");
            }
        </script>
    </head>

    <body>
        <form name="formular">
            Sch&uumler: <input type="text" name="schueler" /><br />
            Note: <input type="text" name="mark" /><br />
            <input type="reset" name="press" value="Eintragen" onClick="entries(document.formular.schueler.value, document.formular.mark.value);"/>
        </form>
    </body>
</html>

Weiterhin: Wenn die Tabelle angezeigt wird, dann fehlen Spalten- und Zeilenstriche ...
 
Zuletzt bearbeitet:
document.write überschreibt das komplette Dokument, wenn die Seite vollständig geladen wurde.
du kannst mit appendChild elemente anhängen. dann musst du vorher natürlich elemente erstellen.

Code: 
var tabelle = document.createElement("table");
for(scholar in arr) {
  var row = document.createElement("tr");
  var scho = document.createElement("td");
  var scho2 = document.createElement("td");
  scho.innerHTML = scholar;
  scho2.innerHTML = arr[scholar];
  row.appendChild(scho);
  row.appendChild(scho2);
  tabelle.appendChild(row);
 }

Viel Spaß :)
 
Dankeschön :)

Nur noch eins: Wieso kann ich die Tabelle nicht mit CSS bearbeiten? (siehe Code) bzw. warum verschwinden die zeilen und spaltenstriche und es bleibt nur der Rahmen der Tabelle selbt übrig?
 
Du kannst de rTabelle ja auch eine css Klasse geben.
Zum Beispiel:
Code: 
  tabelle.className = "klassenname";

Dann sollte es auch funktionieren
 
Und wo wäre da der unterschied zu meiner variante? ich habe style ja direkt in den tabellentag eingebunden. Das müsste doch dasgleiche sein ...
 
Kannst du auch machen.
Code: 
tabelle.style.border = "5px double black";

Ich persönlich finde jedoch die Style Sachen sollten lieber in eine CSS Datei :)
 
Gilles schrieb:
Kannst du auch machen.
Code: 
tabelle.style.border = "5px double black";

Ich persönlich finde jedoch die Style Sachen sollten lieber in eine CSS Datei :)
Zum Vergrößern anklicken....

Sorry, dass ich nochmal nachhake :) Die Varianten, wie man CSS einbindet sind mir schon klar. Mein Problem ist nur Folgendes: Wenn ich bspw.
table { border: 1px solid green; } mache, dann wird nur(!!) die gesamte tabelle außenherrum umrahmt aber die inneren zeilen- und spaltenstriche sind einfach nicht da. woran liegt das und wie kann ich das umgehen und trotzdem noch css verwenden?

bzw. wie gebe ich am geschicktesten linien in tabellen an? irgendwie sind bei mir gar keine linien in den tabellen, egal was ich mache ...
 
Zuletzt bearbeitet:
Gilles schrieb:
document.write überschreibt das komplette Dokument, wenn die Seite vollständig geladen wurde.
du kannst mit appendChild elemente anhängen. dann musst du vorher natürlich elemente erstellen.
Zum Vergrößern anklicken....

Nochmal zu meinem Thema. Du sagst also document.write überschreibt das gesamte dokument, wenn dasselbe geladen wurde.

Wenn ich aber folgendes mache, dann stimmt das nicht mehr ... warum?
var win = window.open("", "name", "width=300, height=300"); // das dokument ist nun geladen, oder?
win.document.write("test1");
win.document.write("test2"); // test1 steht immer noch da!! warum?
win.document.write("test3");

Hier würd plötzlich der Text einfach hinten drangehängt. wo liegt da jetzt der unterschied z
 
document.write überschreibt eigentlich nichts sondern gibt an der Stelle an der es ausgeführt wird den übergebenen Content in die Seite ein. Der Unterschied ist imho dabei wo es ausgeführt wird. Wenn es innerhalb von <head> passiert, könnte tatsächlich das Dokument überschrieben sein. Innerhalb von <body> wäre es nicht der Fall.

Hinweis: das sind nur meine spontanen Gedanken dazu. Ich selbst verwende document.write schon lange nicht mehr und nutze ebenfalls appendChild(), innerHTML etc. um Elemente zu erzeugen oder neue Inhalte einzubringen.
 
sin777 schrieb:
Nochmal zu meinem Thema. Du sagst also document.write überschreibt das gesamte dokument, wenn dasselbe geladen wurde.

Wenn ich aber folgendes mache, dann stimmt das nicht mehr ... warum?
var win = window.open("", "name", "width=300, height=300"); // das dokument ist nun geladen, oder?
win.document.write("test1");
win.document.write("test2"); // test1 steht immer noch da!! warum?
win.document.write("test3");

Hier würd plötzlich der Text einfach hinten drangehängt. wo liegt da jetzt der unterschied z
Zum Vergrößern anklicken....
Öffne mal Bitte kein leeres Dokument sondern ein schon vorhandenes. Überschreibt test1 dann das vorhandene?
Dass test2 nicht test1 überschreibt, sollte daran liegen, dass es direkt nacheinander verarbeitet wird. Wie das DOM dort arbeitet kann ich dir auch nicht genau sagen.

Im Normalfall brauchst du aber auch kein document.write, sondern hängst Sachen ins vorhandene DOM ein oder ersetzt es (innerHTML)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben