Shareit: Statische Tabelle alle x Sekunden neu befüllen

Hallo zusammen,

Ich habe hier ein kleines Problem und hoffe dass ihr mir helfen könnt.
Zunächst einmal habe ich mir mittels einer 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):

  
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);  

Dabei habe ich ein Intervall von 3000 gesetzt. Leider setzt er mir aber jetzt immer eine neue Tabelle unten dran.

Die Tabelle soll immer 2 Spalten und genau 30 Zeilen haben, da ich nur die ersten 30 Werte aus dem array brauche.
Der Inhalt verändert sich durch die xmlhttprequest aber ständig. wie kann ich also eine statische Tabelle erstellen und diese dynamisch befüllen?

Außerdem will ich die Tabelle nicht am ende des bodys, sondern an einer beliebigen stelle haben, wie stelle ich da die verknüpfung her?

Vielen Dank schonmal im Voraus für eure Hilfe!

Beste Grüße

  1. Hallo

    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):

    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);

    
    > … Leider setzt er mir aber jetzt immer eine neue Tabelle unten dran.  
      
    Works as intended. Du erzeugst eine Tabelle (createElement) und hängst sie an das bestehende Dokument an (appendChild). Wenn da schon eine Tabelle ist, ist sie zu diesem Zeitpunkt Teil des bestehenden Dokuments.  
      
    
    > Die Tabelle soll immer 2 Spalten und genau 30 Zeilen haben, da ich nur die ersten 30 Werte aus dem array brauche.  
      
    Hole am besten nur die 30 benötigten Zeilen vom Server. Dann musst du JavaScript-seitig keinen Filter betreiben.  
      
    
    > Der Inhalt verändert sich durch die xmlhttprequest aber ständig. wie kann ich also eine statische Tabelle erstellen und diese dynamisch befüllen?  
      
    Die Struktur der Tabelle wird doch wohl einheitlich und bekannt sein? Etwa: zwei  
    Spalten, erste Zeile zwei THs, danach 30 weitere Zeilen á 2 Zellen als TD. Dann kannst du alle 60 TDs durchlaufen und diesen die Inhalte des Arrays <http://de.selfhtml.org/javascript/objekte/document.htm#create_text_node@title=als Text zuweisen>.  
      
    
    > Außerdem will ich die Tabelle nicht am ende des bodys, sondern an einer beliebigen stelle haben, wie stelle ich da die verknüpfung her?  
      
    Sage appendChild an, an welcher Stelle es appenden soll. Gib dem Elternelement eine ID, identifiziere es mit getElementById() und weise die Tabelle \*diesem\* Element als Kind zu.  
      
    Tschö, Auge  
    
    -- 
    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
    Terry Pratchett, "Wachen! Wachen!"  
      
    ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
      
    [Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)
    
    1. Hey vielen Dank erstmal für die Antwort!

      Works as intended. Du erzeugst eine Tabelle (createElement) und hängst sie an das bestehende Dokument an (appendChild). Wenn da schon eine Tabelle ist, ist sie zu diesem Zeitpunkt Teil des bestehenden Dokuments.

      Die Tabelle soll immer 2 Spalten und genau 30 Zeilen haben, da ich nur die ersten 30 Werte aus dem array brauche.

      Hole am besten nur die 30 benötigten Zeilen vom Server. Dann musst du JavaScript-seitig keinen Filter betreiben.

      Leider unterstützt der Server diese Abfrage nicht. Du kriegst nur den vollen Wurf an Daten...

      Sage appendChild an, an welcher Stelle es appenden soll. Gib dem Elternelement eine ID, identifiziere es mit getElementById() und weise die Tabelle *diesem* Element als Kind zu.

      Ich habe es jetzt so gelöst:

        
      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:

        
      <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

      1. 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?

        Indem du sie gleich aufrufst statt nur über den Timer?

        1. 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?
          Indem du sie gleich aufrufst statt nur über den Timer?

          Hat mit viel rumprobieren geklappt, vielen Dank euch beiden!

      2. Hallo

        Die Tabelle soll immer 2 Spalten und genau 30 Zeilen haben, da ich nur die ersten 30 Werte aus dem array brauche.

        Hole am besten nur die 30 benötigten Zeilen vom Server. Dann musst du JavaScript-seitig keinen Filter betreiben.

        Leider unterstützt der Server diese Abfrage nicht. Du kriegst nur den vollen Wurf an Daten...

        Ach, das ist ja mal befremdlich. Du kannst die Abfrage nicht selbst formulieren und somit deren Ergebnis nicht beeinflussen?

        Sage appendChild an, an welcher Stelle es appenden soll. Gib dem Elternelement eine ID, identifiziere es mit getElementById() und weise die Tabelle *diesem* Element als Kind zu.

        Ich habe es jetzt so gelöst:

        Und im body eine leere tabelle mit der anzahl an zeilen vordefiniert:

        <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...  
          
        Nicht unbedingt schön und ganz gewiss nicht selten. Aber wenn's funktioniert … ;-)  
          
        \*btw\* Die Zeile `<tr><td>Price</td><td height="18">Volume</td></tr>`{:.language-html} möchte die Texte in `<th>`{:.language-html} statt `<td>`{:.language-html} verpackt haben. Frag' sie mal! :-)  
          
        Mit der Nutzung von <http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss@title=<thead> und <tbody>> würdest du der Tabelle zudem noch ein richtig breites Grinsen aufsetzen. Das wäre dann die Kür.  
          
        Tschö, Auge  
        
        -- 
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
        Terry Pratchett, "Wachen! Wachen!"  
          
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
          
        [Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)
        
  2. Hallo Shareit,

    hier ein Lösungsansatz.

    Dabei habe ich ein Intervall von 3000 gesetzt.

    Das verstehe ich nicht.

    Leider setzt er mir aber jetzt immer eine neue Tabelle unten dran.
    Der Inhalt verändert sich durch die xmlhttprequest aber ständig. wie kann ich also eine statische Tabelle erstellen und diese dynamisch befüllen?
    Außerdem will ich die Tabelle nicht am ende des bodys, sondern an einer beliebigen stelle haben, wie stelle ich da die verknüpfung her?

    du erstellst zB <table id="table1"></table><table id="table2"></table> an der Stelle deiner Seite wo du sie haben willst und rufst dann deine Functionen auf in dem du ihnen die neuen Werte und die dazughehörige tableID übergibst, zB:
    fillTable(['1 Zelle', 2, '2 Zelle', 20, '3 Zelle',,,], 1);
    Die Funktion kann natürlich erst aufgefufen werden, wenn die HTML Seite schon erstellt ist, also am Ende des Dokuments.

    gruesse qx

    ps: nur ein Vorschlag, das geht bestimmt eleganter

  3. hi,

    Der Inhalt verändert sich durch die xmlhttprequest aber ständig. wie kann ich also eine statische Tabelle erstellen und diese dynamisch befüllen?

    Wenn die Anzahl der Zellen (cols, rows) immer gleich sind, da könntest Du die Zellen über die id="col.row" direkt adressieren. Idealerweise liefert die Response ein Objekt, beim dem die Schlüssel (Entity, ObjectID) der CellID entsprechen. So kannst Du das über eine Schleife einbauen.

    Außerdem will ich die Tabelle nicht am ende des bodys, sondern an einer beliebigen stelle haben, wie stelle ich da die verknüpfung her?

    Definiere ein <div> oder HTML5-<out> und hänge die table da ein mit appendChild(). Beispiel hier, in Deinem Fall setze einfach innerHTML = ''; bevor die Tabelle neu eingehängt werden soll.

    MfG