Prototypelement.Update Mehrere Objekte

Question

Ich versuche, eine Tabelle mit der neuen Elementfunktion des Prototyps zu konstruieren. Ich hatte Probleme in Firefox, als ich das Thead mit dem vollständigen Inhalt aktualisierte: alle TH -Elemente plus Inhalt. Firefox stridete die Tags aus und zeigt nur den Inhalt an.

Wie auch immer Element.update() Funktion. Aber ich habe keine Möglichkeit gefunden, mehrere Objekte mit dieser Funktion anzuhängen.

Die TH -Elemente sehen so aus:

var thead_amount = new Element('th', {
    'id': 'amount'
}).update('amount');

Das funktioniert gut:

new Element('thead').update(thead_amount);

Dies gibt genauso aus wie oben:

new Element('thead').update(thead_amount, thead_pdf, thead_tags, thead_date, thead_options);

Dies gibt aus [object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement]

new Element('thead').update(thead_amount + thead_pdf + thead_tags + thead_date + thead_options);

Wie kann ich mehrere Objekte mit Prototypen anhängen? update() Funktion?

Vielen Dank!

Answer 1

Bearbeiten

Es ist mir einfach herausgesprungen, dass Sie einem "Thead" "Th" Elemente hinzufügen. Das ist schlecht! Ein Thead sollte nur TRs enthalten. TRs können das enthalten, aber wenn Sie Thead verwenden, würde ich stattdessen TDs verwenden.

Denken Sie daran: tbody, thead und tfoot sind Unterteilungen der Tabelle, und muss TR -Elemente enthalten. Sie sollten TD- oder TH -Elemente nicht direkt in diese einfügen, da die Ergebnisse bestenfalls unvorhersehbar sind.

Ende bearbeiten

Das Problem hier ist, dass Element.Update () eine Zeichenfolge, ein HTML -Snippet oder ein JavaScript -Objekt übergeben werden muss, das das ToString implementiert (z. B. Element). Das Element unterstützt jedoch nicht den '+' -Operator wie Sie es verwenden, und fügt die Objektnamen wie Sie sehen. Sie müssten die ToString -Methode für jedes Kind explizit als solches aufrufen:

new Element('thead').update(thead_amount.toString()
  + thead_pdf.toString() 
  + thead_tags.toString() 
  + thead_date.toString() 
  + thead_options.toString());

Wenn Sie script.aculo.us in Ihrer App (eine Prototypeerweiterung) verwenden, können Sie die Builder -Klasse verwenden, um die Konstruktion der Elemente zu erleichtern. Es bietet eine viel intuitivere Schnittstelle, insbesondere wenn eine große Anzahl von Elementen erstellt wird. Hier ist ein Beispiel:

var table = Builder.node('table', {
  width: '100%',
  cellpadding: '2',
  cellspacing: '0',
  border: '0'
});

var tbody = Builder.node('tbody'),
    tr = Builder.node('tr', { className: 'header' }),
    td = Builder.node('td', [Builder.node('strong', 'Category')]);

tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);

$('divCat').appendChild(table);

Kasse http://wiki.github.com/madrobby/scriptaculous/builder für Details.