كيفية تحميل الجداول ديناميكيًا وإضافة صفوف الجدول ديناميكيًا في جافا سكريبت

1. تحميل الجداول ديناميكيًا

1. قم أولاً بتعيين المعرف للموضع المضاف للجدول في html

أي، اكتب علامة div داخل علامة النص الأساسي لـ html للإشارة إلى أنه سيتم إضافة الجدول إلى داخل هذا div. على النحو التالي

<div معرف = "tdl"><div>

2. اكتب البيان لإضافة الجدول في جافا سكريبت

إذا كان موجودًا في ملف html الحالي، فسيتم كتابته داخل علامة <script>، مثل

انسخ رمز الكود كما يلي:

<نوع البرنامج النصي = "نص/جافا سكريبت">

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" // يمكن إنشاء الجدول المضاف هنا وفقًا لاحتياجاتك الخاصة

</script>

إذا قمت باستيراد ملف js، فاكتب العبارة التالية مباشرةً في ملف js (بافتراض أنه test.js)

انسخ رمز الكود كما يلي:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

ثم قم بتقديم ملف html الخاص بك

انسخ رمز الكود كما يلي:

<script type="text/javascript" src="test.js"></script>

2. إضافة صفوف الجدول بشكل حيوي

1. قم أولاً بتعيين المعرف لموضع الإضافة لصف الجدول في HTML. يجب أن يكون هذا الموضع داخل <tbody> (ليس دقيقًا بشكل خاص، لكنني حصلت على هذا الاستنتاج بناءً على الاختبار الذي أجريته. إذا كانت لديك طرق أخرى، فيرجى ترك رسالة). ، شكرا لك)، على النحو التالي

انسخ رمز الكود كما يلي:

<الجدول>

<الرأس></الرأس>

<tfoot><tfoot> يتم استخدام //tfoot وthead مع tbody، لكن عندما كنت أكتب، كان من المقبول عدم استخدامهما.

<tbody id="rows"></tbody>

</الجدول>

[/ق/س]*/ن

2. في محتوى جافا سكريبت، يجب عليك أولاً إنشاء صفوف وخلايا، ثم إضافة صفوف في <.tbody>، كما يلي

[شفرة]

Row=document.createElement("tr"); //إنشاء صف

td1=document.createElement("tr"); //إنشاء خلية

td1.appendChild(document.createTextNode("content")); // إضافة محتوى إلى الخلية

Row.appendChild(td1); // أضف خلايا إلى الصف

document.getElementById("rows").append(row); // أضف صفوفًا إلى <tbody>

3. اكتشافي الصغير (ربما يعرفه الآخرون بالفعل...)

1. لقد أجريت اختبارًا بنفسي، حيث قمت بكتابة <table id="tdl'></table> بلغة html وdocument.getElementById("tdl").innerHTML="<tr><td></td> بلغة جافا سكريبت </ tr>"، بعد كتابة هذا، اختبره، لن تتم إضافة صفوف الجدول في HTML.

2. بعد الانتهاء من الاختبار أعلاه، قمت بتغييره مرة أخرى لكتابة <table><tr><td id="t'><td><tr></table> بتنسيق html و document.getElementById("t in javascript " ).innerHTML="<p>content</p>"، يمكن للاختبار إضافة محتوى.

3. التفكير: ما هي الاستنتاجات التي يمكن استخلاصها من الاختبارين المذكورين أعلاه، ولم أتمكن من معرفة كيفية تلخيصها بعد؟ ما نوع العلامات التي يمكن إضافتها مباشرة من خلال InternalHTML؟