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

[FRAGE] Dynamische Tabelle automatisch alle x sekunden aktualisieren

shareit

New member
Hallo zusammen,

erst einmal möchte ich mich vorstellen: Ich heiße Morten und studiere zur Zeit Umweltingenieurwesen an der TU München. Ich habe nebenbei mal ein kleines Javascript Projekt begonnen und stehe aber hier ein wenig auf dem Schlauch. Ich muss dazu sagen, dass ich erst seit wenigen Tagen Javascript schreibe, ich versuche mir aber so viel wie möglich selbst beizubringen.
Bei dem folgenden Problem komme ich allerdings auch mit Google nicht weiter:

Zunächst einmal habe ich mir mittels eine XMLHttpRequest einen String ausgeben lassen, diesen habe ich geparst und in zwei Arrays gepackt, so weit so gut.

Diese beiden arrays haben jeweils folgende Form
Zahl1a,Zahl1b,Zahl2a,Zahl2b....usw.
Zwei Ziffern gehören immer zusammen (Die erste Ziffer gibt einen Preis aus, die zweite ein Volumen zu diesem Preis). Diese arrays habe ich dann mit folgendem Code versucht in je eine zweispaltige Tabelle zu packen (hier der code nur für eine Tabelle, die zweite wird ja analog erstellt):

Code:
var table = document.createElement("table");
table.setAttribute('border', '1');
for (var i = 2; i < bidsarray.length+1; i=i+2) {
var row = table.insertRow(i/2-1);
var PriceCell = row.insertCell(0);
var VolumeCell = row.insertCell(1);
PriceCell.innerHTML=bidsarray[i-2];
VolumeCell.innerHTML=bidsarray[i-1];
}
document.body.appendChild(table);

Diese Tabelle wird auch richtig ausgegeben, allerdings aktualisiert sie sich nicht automatisch. Ich habe für die gesamte Funktion inkl. des XMLHttpRequests einen setInterval von 3000 gesetzt, aber ich vermute, dass zwar der HTML Code immer neu geschrieben wird aber man eigentlich den Browser aktualisieren müsste um das zu sehen.

Ich weiß aber auch nicht, wie ich den Code ändern muss, damit sie automatisch aktualisiert wird.

Weiterhin würde ich gerne wissen, wie ich per html die Tabelle an einer beliebigen Stelle platzieren kann. Momentan wird sie ja nur ganz unten im Body ausgegeben. Mit document.getElementById("tabelle1").innerHTML=table hatte ich keinen Erfolg (kriege dann ,,[object HTMLTableElement]'' ausgegeben)


Vielen Dank schonmal für eure Hilfe!

Beste Grüße,
Morten
 
ich vermute, dass zwar der HTML Code immer neu geschrieben wird aber man eigentlich den Browser aktualisieren müsste um das zu sehen.
nein, der browser aktualisiert automatisch, wenn sich nach dem abarbeiten des codes was am dom geändert hat
da muss man auch nichts vermuten, den aktuellen domtree kann man sich ansehen, im ff über ctrl shift c

Weiterhin würde ich gerne wissen, wie ich per html die Tabelle an einer beliebigen Stelle platzieren kann. Momentan wird sie ja nur ganz unten im Body ausgegeben.
über eine der dom methoden wie du sie nutzt oder eine der anderen. du musst dir nur das entsprechende element aus dem dom suchen, an dem du sie einfügen willst.
außerdem musst du deine tabelle jedesmal lösen, wenn du eine neue einfügst, sonst hast du alle 3 sekunden eine weitere
 
Hey erstmal vielen dank für die Antwort! Könntest du mir eine Hilfestellung geben, was ich dafür am Code ändern müsste?

Danke und beste Grüße,
Morten

Edit: Ich formuliere das besser noch etwas konkreter:
Ich mochte eine statische Tabelle mit genau 2 spalten und 30 Zeilen, die aus einer xmlhttp request alle 3 sekunden mit neuen daten versorgt werden soll.
Die Tabelle soll also fix sein, der inhalt nicht.

Vielen Dank nochmal!
 
Zuletzt bearbeitet:
Edit: Ich formuliere das besser noch etwas konkreter:
Ich mochte eine statische Tabelle mit genau 2 spalten und 30 Zeilen, die aus einer xmlhttp request alle 3 sekunden mit neuen daten versorgt werden soll.
Die Tabelle soll also fix sein, der inhalt nicht.
dann musst du dir einfach nur die entsprechenden spalten in den entsprechenden zeilen suchen und neu füllen.
willst du ältere browser unterstützen, brauchst du noch ein querySelector polyfill, oder du verwendest jquery, die verwenden sizzle als fallback in der 1er versionsreihe
 
Hey vielen Dank für die Antwort! Ich habe es zwischenzeitlich so gelöst:

Code:
var tableasks=document.getElementById('Asks').rows;
     var z=tableasks[1].cells;
    z[0].innerHTML="Price";
    z[1].innerHTML="Volume" ;
    for (var i = 4; i < 34; i=i+2){
    tableasks[i/2].cells[0].innerHTML=asksarray[i-4]
    tableasks[i/2].cells[1].innerHTML=asksarray[i-3]
    }
Und im body eine leere tabelle mit der anzahl an zeilen vordefiniert:
Code:
<table id="Bids" border="1" cellspacing="1" cellpadding="2">
    <colgroup>
    <col width="100">
    <col width="100">
  </colgroup>
    <tr>
    <th colspan="2">Bids</th>
  </tr>
<tr><td>Price</td><td height="18">Volume</td></tr>
    <tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr><tr><td height="18"></td><td></td></tr>
</table>

Ist bestimmt nicht die eleganteste Methode, aber zumindest funktioniert es...


Jetzt habe ich allerdings noch eine Frage:
ich habe die Funktion, die die xmlhttprequest anfrage macht mit einem intervall versehen:

Code:
setInterval(function() {...}, 3000);

Jetzt hätte ich es aber gerne, dass die Funktion am anfang erst einmal durchläuft und sich dann wiederholt. Momentan muss ich immer 3 sekunden warten, bevor ich werte sehe. Wie mache ich das?

Danke und beste Grüße,
Morten
 
Schreib doch das Interval nach ganz unten. Also erst die function und danach bei Erfolg das Timeout Interval, welches die function aufruft.
 
Hm ich steh wohl gerade auf dem Schlauch.. Brauche ich jetzt ein setTimeout oder ein setIntervall?
Danke schon mal :)
 
Ich würde es nur mit setTimeout im Positivfall machen, weil das Intervall ja auch weiter feuert, auch wenn ein Fehler auftritt. Das führt zu lustigen Effekten im Browser die von abstürzen bis einfrieren alles beinhalten :)
 
weil das Intervall ja auch weiter feuert, auch wenn ein Fehler auftritt.
Was auch ein Vorteil sein kann.

Ich würde ja der Funktion einfach einen Namen geben und dann auch direkt aufrufen:
Code:
function updateTable(){
	....
}

window.setInterval(updateTable, 3000);
updateTable();
 
Was auch ein Vorteil sein kann.

Ich würde ja der Funktion einfach einen Namen geben und dann auch direkt aufrufen:
Code:
function updateTable(){
	....
}

window.setInterval(updateTable, 3000);
updateTable();

Ja genau so hab ich es jetzt auch gemacht, vielen Dank nochmal an alle für die Hilfe!

Gibt es eigentlich eine Möglichkeit, sich die von der XMLHttp gezogenenen Werte in eine Datenbank oder Datei oder zusätzliche Variable zu speichern, oder funktioniert das nur mit php?
 
In Variablen oder Arrays kannst du alles mit JavaScript speichern, sobald du aber Sessionvariablen, Dateien und Datenbanken verwenden willst, brauchst du PHP. Benutzerseitiges Speichern in Dateien funktioniert ebenfalls nicht automatisiert aus Sicherheitsgründen (das wäre ja quasie DIE Definition eines Drive-By-Downloads). Du kannst aber auch Cookies verwenden, die kann man auch über JavaScript verwenden.

Wenn du HTML5 verwendest, kannst du allerdings durchaus größere Werte speichern, HTML5 bietet eine Storage Funktion, damit kannst du Werte auch über einen Page-Refresh hinweg speichern. So genau habe ich mich damit aber noch nicht beschäftigt, ist auf jeden Fall ein komplexes Thema, wird aber in Zukunft einige coole Features für Webanwendungen bedeuten. Zum Beispiel kannst du damit einen Web-E-Mail-Client komplett unabhängig vom Internet betreiben und bereits empfangene Mails auch Offline ansehen und sogar darauf antworten, sie werden dann abgeschickt, wenn du das nächste mal online bist (siehe Gmail Offline).
 
Zuletzt bearbeitet:
Hm also ich habe das mal versucht als ich die XMLHttpRequest bei einer Änderung grafisch hervorheben wollte, hatte mir das so gedacht:
[Pseudocode]
Wenn vorher noch keine xmlhttp request erfolgt ist (variable nicht belegt war) mache nichts, wenn vorher schon ein Wert drin war setze y=x
Get XMLHttp(...)
Speichere Rückgabe in Variable x
Wenn x>y --> Färbe dich grün
Wenn x<y --> Färbe dich rot
Sonst Tue nichts
[Pseudo Code Ende]
Das ganze natürlich in einem Intervall von in diesem Fall 3 Sekunden. Allerdings hat er mir den Wert von der XMLHttpRequest von vorher nie gespeichert, sondern immer undefined zurückgegeben. Was muss ich denn da anders machen?

Danke und beste Grüße
 
Der Rückgabewert des xhr ist natürlich auch erst verfügbar, wenn der Request fertig ist. Deswegen must du die ganze Weiterverarbeitung (Speichern, Abfragen, Einfärben) auch im entsprechenden Callback/Event ausführen.
 
Zurück
Oben