jQuery: HTML dynamisch erzeugen

[qde]

Hi,

ich bekomme über einen Ajax-Request ein JSon Array zurück. für jedes Objekt im Array möchte ich jetzt eine Tabellenspalte erstellen. So sieht das im Moment bei mir aus (stark vereinfacht):

<table id='mytab'> </table>


var currentCollection = getCollectionByAjaxRequest();
var html = '';
currentCollection.forEach(function(wid, index, array) {
    jQuery('#mytab').append('<div id=DynamicDivId\''+index+'\'<tr><td>'+ wid.Text + '</td><tr>');
}

Ich möchte jetzt aber das gesamte html, dass ich beim append verwende, nicht als String übergeben, sondern über jQuery zusammenbauen, da das HTML durch das ständige escapen extrem unleserlich und unübersichtlich wird.

Kann mir jemand vielleicht einen Tipp geben welche Funktionen ich mir bei jQuery mal anschauen sollte?

 

[Enumerator]

Nö, Doku musst Du schon selber lesen: http://docs.jquery.com/Main_Page

Das wird übrigens auch nicht funktionieren - egal ob jQuery oder nicht:

jQuery('#mytab').append('<div id=DynamicDivId\''+index+'\'<tr><td>'+ wid.Text + '</td><tr>');

Nehmen wir mal an:

index = 1;
wid = {'Text':'text...'};

Dann käme da etwas raus wie:

<div id=DynamicDivId'1'<tr><td>text...</td></tr>

Wenn Du das gelöst hast, hier noch ein kleiner Tipp im Voraus:
Wenn Du Probleme im IE bekommst, schau mal hier...

Greetz
Enumt

 

[qde]

Moin,

um das ganze zu vereinfachen, habe ich rasch die unten stehenden Zeilen geschrieben. Dadurch habe ich den Fehler mit den Anführungszeichen begangen. Ansonsten funktioniert es also. Dadurch, dass ich da mehr mache, als nur ein Div mit einer dynamischen ID und eine Tabellenzeile zu "appenden", wird das extrem unhandlich. Ich muss in etwa 30 Zeilen Code hinzufügen und die Strings immer schön escapen. Dadurch, dass dort einige variable Inhalte eingefügt werden, kommt jQuery().load() nicht in Frage denke ich.

Vielen Dank für den Link zur Dokumentation. Die habe ich mir schon gestern angeschaut. Ich finde allerdings nur Methoden, bei denen Strings übergeben oder per .get() bzw. load() Strings aus externen Quellen geladen werden.

Mir würde es schon reichen, wenn du, lieber Enum, mir einfach verraten könntest, welche Funktion ich in der Dokumentation übersehen habe.

Besten Dank
qde

 

[Quaese]

Hi,

du könntest auf die Methoden insertRow und insertCell zugreifen, die das DOM zur Verfügung stellt.

Beispiel

json-String:

[{'Text': 'text 1'},{'Text': 'text 2'},{'Text': 'text 3'}]

jQuery-Passage:

new Ajax.Request('xmlhttp_request_dummy.php', {
  method: 'post',
  onComplete: function(objReq){
    wid = eval("("+objReq.responseText+")");
    // Hier muss über die Methode getElementById auf das Element zugegriffen werden,
    // nicht über $('...')
    var objTable = document.getElementById("mytab");
    var objRow = objTable.insertRow(objTable.rows.length);
    for(var intIndex=0; intIndex<wid.length; intIndex++){
      var objTD = objRow.insertCell(intIndex);
      objTD.innerHTML = wid[intIndex].Text;
    }
  }
});

Vielleicht hilft dir das weiter.

Ciao
Quaese