Erstellung einer Tabelle oder etwas vergleichbarem

[TroyPan]

Hallo,

ich versuche mich an eine Windows Gadget welches die aktuellen Ergebnisse unserer Handballmannschaften ausgibt. Als Tabelle würde das dann so aussehen:

<table>
 <tr>
  <td colspan=2>Heimmannschaft</td>
 </tr>
 <tr>
  <td>Gastmannschaft</td>
  <td>Ergebnis</td>
 </tr>
</table>

Wie kann ich nun so eine Tabelle mit JavaScript ausgeben?
Ich lese die Ergebnisse aus einer Datenbank und geb sie als XML aus die dann vom JavaScript geparst werden soll. Ich habs mit einem Beispiel soweit geschafft das meine Daten auch im Gadget ankommen, nur eben nicht so formatiert das sie gut ins Ausgabefeld passen.

hier das Script mit dem meine Daten ausgegeben werden:

function buildNewList(xmldoc) {
  var feeddiv = document.getElementById("feedcontainer");
  // Zuerst XML-Feed parsen
  var feeditems = xmldoc.getElementsByTagName("spiel");

// alert("feeditems länge - ["+feeditems.length+"]");

var titlelinks = [];
  for (var i=0; i<feeditems.length; i++) {
   //  alert("Feeditem Titel: "+feeditems[i].getElementsByTagName("spiel")[0].childNodes[0].data);
    titlelinks[i] = [];
    titlelinks[i][0] = feeditems[i].
      getElementsByTagName("heim")[0].childNodes[0].data;
    titlelinks[i][1] = feeditems[i].
      getElementsByTagName("gast")[0].childNodes[0].data;
    titlelinks[i][2] = feeditems[i].
      getElementsByTagName("ergebnis")[0].childNodes[0].data;
  }

// Hier mein Problembereich
// ich bekommt keine Ausgabe hin die der obigen Tabelle nahe kommt
  var list = document.createElement("ul");
  for (var j=0; j<titlelinks.length; j++) {
    var li = document.createElement("li");
    var a = document.createElement("a");
    a.setAttribute("href", titlelinks[j][1]);
    var t = document.createTextNode(titlelinks[j][0]);
    a.appendChild(t);
    li.appendChild(a);
    list.appendChild(li);
  }
  feeddiv.appendChild(list);
}

// habs auch schon mal so versucht, aber das gibt ja immer nur ein Feld proreihe
//  var table = document.createElement("table");
//for (var j=0; j<titlelinks.length; j++) {
//    var t = document.createTextNode(titlelinks[j][0]);
//    td.appendChild(t);
//    tr.appandChild(td);
//  }
//  table.appandChild(tr);
//  feeddiv.appandChild(table);
//}

Für nen Denkanstoss in der Richtung wär ich echt dankar.

[Oliver]

wie wäre es mit

document.write('<tr><td>' + gastmannschaft + '</td><td>' + ergebnis + '</td></tr>');

und das Ganze dann in einer Schleife.

[JürgenB]

Hallo TroyPan,

//  var table = document.createElement("table");
//for (var j=0; j<titlelinks.length; j++) {
//    var t = document.createTextNode(titlelinks[j][0]);
//    td.appendChild(t);
//    tr.appandChild(td);
//  }
//  table.appandChild(tr);
//  feeddiv.appandChild(table);
//}

da fehlt aber einiges. Eine Tabelle ist so aufgebaut:

table tbody tr td

Auch wenn der tbody im html fehlen darf, im Javascript muss er angelegt werden.

Ich mache es z.B. so:

  
  t = document.getElementById("Id") ;     // hier soll die Tabelle hin  
  tbl = document.createElement("table");  // Tabelle  
  tbdy = document.createElement("tbody"); // tbody  
  for (var z=0;z<nz;z++) {                // Schleife für die Zeilen  
   var trz = document.createElement("tr");  
   for (var s=0;s<ns;s++) {               // Schleife für die Felder  
    var tds = document.createElement("td");  
    tds.appendChild(document.createTextNode("-")) ; // Textknoten im Feld  
    trz.appendChild(tds);                 // Felder in die Zeile hängen  
   } // s  
   tbdy.appendChild(trz);                 // Zeilen in den tbody hängen  
  } // z  
  tbl.appendChild(tbdy) ;                 // tbody in die Tabelle hängen  
  t.appendChild(tbl) ;                    // Tabelle anzeigen  

Das habe ich aus einer meiner Seiten kopiert und gekürzt und kommentiert, aber so nicht getestet. Alternativ kann man auch mit dem table-Objekt arbeiten.

Gruß, Jürgen

[TroyPan]

Hallo Jürgen,

besten Dank für deine Tipps, jetzt klappts auch mit ner Tabelle.