كيف أقوم بإضافة <جدول> باستخدام العنصر مع النموذج الأولي في IE6؟[مغلق]

Question

باستخدام "العنصر الجديد (...)" الخاص بالنموذج الأولي 1.6، أحاول إنشاء عنصر <table> بكل من <thead> و<tbody> ولكن لا يحدث شيء في IE6.

var tableProto = new Element('table').update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>');

ثم أحاول حقن نسخ منه مثل هذا:

$$('div.question').each(function(o) {
  Element.insert(o, { after:$(tableProto.cloneNode(true)) });
});

الحل البديل الحالي هو إنشاء عنصر <div> بدلاً من عنصر <table>، ثم "تحديثه" باستخدام HTML الخاص بالجدول بأكمله.

كيف يمكن للمرء أن يفعل هذا بنجاح؟

Answer 1

كما اتضح، لا يوجد أي خطأ في رمز المثال الذي قدمته في السؤال - فهو يعمل في IE6 بشكل جيد.المشكلة التي كنت أواجهها هي أنني قمت أيضًا بتحديد فئة لعنصر <table> في المُنشئ بشكل غير صحيح، لكنني حذفت ذلك من المثال الخاص بي.

الكود "الحقيقي" كان كما يلي، وهو غير صحيح:

var tableProto = new Element('table', { class:'hide-on-screen'} ).update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>');

يعمل هذا بشكل صحيح في Firefox، لكنه يفشل في IE6 لأنه كذلك خطأ.

الطريقة الصحيحة لإضافة سمات إلى عنصر عبر هذا المنشئ هي توفير سلاسل، وليس فقط أسماء السمات.الكود التالي يعمل في كلا المتصفحين:

var tableProto = new Element('table', { 'class':'hide-on-screen'} ).update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>');

يوجد خطأ لأن كلمة "class" هي كلمة محجوزة في JavaScript.دوه!

وليكن هذا عبرة لمن لا يزودهم فِعلي شفرة!

Answer 2

إذا حاولت طريقة .update() الخاصة بالنماذج الأولية تعيين .innerHTML داخليًا، فسوف تفشل في IE.في آي إي، إن ملف .innerHTML الخاص بعنصر الجدول يكون للقراءة فقط.

مصدر:

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html