[JavaScript/jQuery] Tabelle befüllen

[iks-deh]

Hi,

ich habe ein Problem beim entwickeln einer Webseite. Und zwar möchte ich eine Seite mit einer Tabelle erzeugen und diese dann befüllen. Das ganze soll als Dialog angezeigt werden, der mit jQuery-UI erzeugt wurde. Probleme habe ich beim erzeugen bzw. beim befüllen der Tabelle.

Der relevante Code des Dialogs sieht wie folgt aus:

    var dialogDiv = $('<div />');
   
    dialogDiv.append('<hr>');

    var table = dialogDiv.append('<table>')

    var row = table.append('<tr>');

    var leftCell = row.append('<td>');
    
    leftCell.append('Links');

    row.append('</td>');

    var rightCell = row.append('<td>');

    rightCell.append('Rechts');

    dialogDiv.appendTo('body');

Der Dialog öffnet sich, allerdings stimmt die Anordnung der Tabelle nicht. Der Debugger im Browser zeigt mir folgendes an:



Laut jQuery-Dokumentation soll aber "append" aber doch innerhalb des Elements den Text/Code einfügen. Hab ich hier ein generelles JavaScript-Verständnis-Problem?
Konnte nichts ähnliches im Forum finden, deshalb hab ich da Thema eröffnet.

Danke im Vorraus!^

edit: Das "Text123" kann man ignorieren ^^.

 

[Lawnmower]

ja ich glaube append bzw jquery oder der Browser macht immer das Element auch wieder zu und nicht nur auf, du müsstest also eine ganze Tabellenzeile mit einem append machen.
Also irgendwie so müsste es gehen:

table.append('<tr><td>Links</td><td>Rechts</td></tr>');

Aber vielleicht gibts ja auch noch andere Lösungen, die Tabelle kannst nicht mit PHP oder so erzeugen?

 

[iks-deh]

Ne, möchte bei JS bleiben. Gibt es denn keine komfortable Möglichkeit den Inhalt von Tags zu verändern?

 

[Lawnmower]

was willst Du denn genau machen? Kannst Du das ein wenig genauer beschreiben?
Bis jetzt wolltest Du einfach eine Tabelle in einem dynamisch erzeugten Div erstellen.

 

[iks-deh]

Naja, ich möchte die Tabelle befüllen. Nicht mit einfachem Text, sondern dynmisch mit Werten aus einer Datenbank. Links soll eine Liste mit verschiedenen Elementen rein, und rechts dann Text dazu.

 

[Lawnmower]

und wie holst Du die Werte aus der Datenbank?

 

[iks-deh]

Per AJAX von einem WebService, das funktioniert auch schon, deshalb denke ich dass das erst mal irrelevant ist.

 

[Lawnmower]

ist das denn jetzt ein Problem dass Du immer eine ganze Tabellen Zeile an einem Stück schreiben müsstest?

 

[iks-deh]

Ne, das wäre eigentlich kein Problem. Ich möchte eigentlich nur zwei getrennte Bereiche haben, links mehrere Elemente als Liste, rechts Text. Dachte mit einer Tabelle wäre das am einfachsten zu lösen. Allerdings habe ich da ja ein Problem ^^. Wenn du eine andere Möglichkeit kennst, immer her damit.

 

[Yuuri]

Überleg dir mal die Rückgabewerte.

var dialogDiv = $('<div />');
dialogDiv.append('<hr>');
 
var table = dialogDiv.append('<table>')

Lass dir mal dialogDiv und table ausgeben. In beiden bekommst du jeweils den div-Block zurückgegeben und nicht das Element, was du darin erzeugst. Kann also nicht funktionieren. Besser:

// weg 1

var d = $('<div>')
    .append( $('<hr>') )
    .append(
        $('<table>')
            .append(
                $('<tr>')
                    .append( $('<td>').text( 'links' ) )
                    .append( $('<td>').text( 'rechts' ) )
            )
    );

$('body').append( d );

// weg 2

var div = $('<div>'),
    hr = $('<hr>'),
    t = $('<table>'),
    tr = $('<tr>'),
    links = $('<td>').text( 'links' ),
    rechts = $('<td>').text( 'rechts' );

div
    .append( hr )
    .append(
        t
            .append(
                tr
                    .append( links )
                    .append( rechts )
            )
    );

$('body').append( div );

Der zweite Weg entspricht im Prinzip deinem Ansatz, bekommt aber die richtigen Elemente zurück.

 

[Lawnmower]

Eine Möglichkeit wäre jede Tabellenzeile mit einer id auszustatten, die kannst Du dann mit jQuery bequem per html() befüllen. Ist ein wenig umständlich und nicht sehr hübsch aber sollte funktionieren.

Eine weitere Variante könnte sich evtl mit dem dl Element anbieten, das hat dann sozusagen "2 Spalten": Die erste mit dt und die zweite mit dd. Aber je nach Inhalten die Du da reinpackst auch nicht das Richtige.

Ansonsten wenns nicht anders geht mit Div Elementen.

 

[iks-deh]

@Yuuri:

Vielen Dank, da hab ich wohl beim Rückgabewert nicht aufgepasst. Dein Weg hat funktioniert, vielen Dank :-).

Und danke auch an Lawnmower.