Elementype النموذجي. كائنات متعددة

Question

أحاول بناء جدول مع وظيفة العنصر الجديد النموذجي. كنت أعاني من مشاكل في فايرفوكس عندما كنت أقوم بتحديث Thead مع المحتوى الكامل: جميع العناصر المزدوجة بالإضافة إلى المحتويات. كان فايرفوكس تجريد العلامات ويعرض فقط المحتويات.

على أي حال قررت إنشاء كل عنصر مهم ثم إلحاقه بالموزع Element.update() وظيفة. لكنني لم أجد وسيلة لإلحاق كائنات متعددة بهذه الوظيفة.

تبدو العناصر الالمانية:

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

هذا يعمل بشكل جيد:

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

هذا النواتج كما هو مذكور أعلاه:

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

هذا المخرجات [object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement]

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

كيف يمكنني إلحاق كائنات متعددة باستخدام النموذج الأولي update() وظيفة؟

شكرا!

Answer 1

يحرر

قفزت فقط في وجهي أن تقوم بإضافة عناصر "th" إلى "Thad". هذا سيء! يجب أن يحتوي Thead على TR فقط. يمكن أن تحتوي TR، ولكن إذا كنت تستخدم Thead، فسأي استخدام TD بدلا من ذلك.

تذكر: Toby، Thead، و TFOOT هي تقسيمات من الجدول، و يجب تحتوي على عناصر tr. يجب ألا تضع العناصر TD أو عناصر مباشرة في هذه، لأن النتائج لا يمكن التنبؤ بها في أحسن الأحوال.

End Edit.

المشكلة هنا هي أنه يجب أن يتم تمرير Element.Update () سلسلة أو مقتطف HTML أو كائن JavaScript ينفذ ToString (مثل العنصر). ومع ذلك، لا يدعم العنصر المشغل "+" كما كنت تستخدمه، ويضيف معا أسماء الكائنات كما ترى. يجب عليك استدعاء طريقة Tostring بشكل صريح على كل طفل على هذا النحو:

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

إذا كنت تستخدم Script.aculo.us في تطبيقك (ملحق نموذجي)، فيمكنك استخدام فئة Builder للمساعدة في بناء العناصر أسهل. يوفر واجهة أكثر بديهية أكثر بكثير، خاصة عند إنشاء أعداد كبيرة من العناصر. هنا مثال:

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

الدفع http://wiki.github.com/madrobby/scriptaculousulous/builder. للتفاصيل.