لن أتحدث عن سيطرة CSS على الطاولة في الوقت الحالي. أولاً ، سأشارك DOMs شائعة الاستخدام في الجدول أدناه.
الطرق الشائعة الاستخدام لإضافة عمليات الجدول هي طرق insertrow () و insertcell ().
يتم حساب الصف من الصفر ، على سبيل المثال:
انسخ الرمز كما يلي: var otr = document.getElementById ("Member"). inserTrow (2)
وهذا يعني إضافة خط جديد إلى السطر الثاني.
نسخة الكود كما يلي:
var atext = new array () ؛
atext [0] = document.createTextNode ("fresheggs") ؛
atext [1] = document.createTextNode ("W610") ؛
atext [2] = document.createTextNode ("5 نوفمبر") ؛
atext [3] = document.createTextNode ("Scorpio") ؛
atext [4] = document.createTextNode ("1038818") ؛
لـ (var i = 0 ؛ i <atext.length ؛ i ++) {
var otd = otr.insertcell (i) ؛
otd.appendchild (atext [i]) ؛
}
يقوم المتغير OTR بإدخال صف جديد للجدول ، ثم يستخدم InsertCell لإدراج بيانات جديدة لهذا الصف ، ويستخدم CreateTextNode لإنشاء عقدة نصية جديدة ، ويعطيها OTD في AppendChild ، و OTD هي الخلية الجديدة.
1. أدخل صف (جدول إضافة ديناميكي)
نسخة الكود كما يلي:
<script type = "text/javaScript">
window.onload = function () {
var otr = document.getElementById ("member"). inserTrow (2) ؛ // أدخل خط
var atext = new array () ؛
atext [0] = document.createTextNode ("fresheggs") ؛
atext [1] = document.createTextNode ("W610") ؛
atext [2] = document.createTextNode ("5 نوفمبر") ؛
atext [3] = document.createTextNode ("Scorpio") ؛
atext [4] = document.createTextNode ("1038818") ؛
لـ (var i = 0 ؛ i <atext.length ؛ i ++) {
var otd = otr.insertcell (i) ؛
otd.appendchild (atext [i]) ؛
}
}
</script>
<ملخص الجدول = "قائمة الأعضاء في EE Sunday" id = "member">
<Sption> قائمة الأعضاء </caption>
<tr>
<th scope = "col"> الاسم </th>
<th scope = "col"> class </h>
<th scope = "col"> عيد ميلاد </th>
<th scope = "col"> constellation </h>
<th scope = "col"> mobile </h>
</r>
<tr>
<td> Isaac </td>
<td> W13 </td>
<td> 24 يونيو </td>
<td> السرطان </td>
<td> 1118159 </td>
</r>
<tr>
<td> girlwing </td>
<td> W210 </td>
<td> سبتمبر 16 </td>
<td> virgo </td>
<td> 1307994 </td>
</r>
<tr>
<td> Tastestory </td>
<td> W15 </td>
<td> 29 نوفمبر </td>
<td> sagittarius </td>
<td> 1095245 </td>
</r>
</table>
2. تعديل محتوى الجدول
بعد إنشاء الجدول ، يمكنك استخدام HTMLDOM مباشرة لتشغيل الجدول ، وهو أكثر ملاءمة من المستند.
otable.rows [i] .Cell [J]
يمكن لـ أعلاه الوصول بسهولة إلى الصف I-Th والعمود J-Th من الجدول من خلال صفين وخلايا اثنين (كلاهما تم حسابه من 0). بعد الحصول على كائن الخلية ، يمكنك استخدام سمة InnerHTML لتعديل محتوى Xiangyu.
على سبيل المثال ، قم بتعديل محتوى 4 صفوف و 5 أعمدة لتكون جيدة
ثم يمكنك استخدام الكود التالي
نسخة الكود كما يلي:
var otable = document.getElementById ("table1") ؛
otable.rows [4] .cells [5] .innerhtml = "good" ؛
3. حذف محتويات الجدول
نظرًا لأن الجدول لديه وظيفة إضافة وتعديل وحذفه.
يستخدم حذف الصفوف في الجدول طريقة deleterow (i) ، حيث أنا رقم الصف.
يستخدم حذف الأعمدة في الجدول طريقة DELETECELL (J) لـ TR.
يشير الرمز التالي إلى الصف الثاني من الجدول المحذوف والعمود الثاني من الصف الثالث من الجدول الأصلي
نسخة الكود كما يلي: var otable = document.getElementById ("table1") ؛ otable.deleTerow [2] ؛ otable.rows [2] .Deletecell [3] ؛
يشير الرمز التالي إلى أنه إذا تم حذف الصف الثاني من الجدول وتم اعتبار العمود الثاني من الصف الثالث من الجدول الأصلي يحتوي على حذف ديناميكي ولا يؤثر على إطار HTML الكلي ، أو إذا كان محتوى الجدول كثيرًا ، يمكن اعتماد حذف ديناميكي وإضافة.
نسخة الكود كما يلي:
<script type = "text/javaScript">
window.onload = function () {
var otr = document.getElementById ("member"). inserTrow (2) ؛ // أدخل خط
var atext = new array () ؛
atext [0] = document.createTextNode ("fresheggs") ؛
atext [1] = document.createTextNode ("W610") ؛
atext [2] = document.createTextNode ("5 نوفمبر") ؛
atext [3] = document.createTextNode ("Scorpio") ؛
atext [4] = document.createTextNode ("1038818") ؛
لـ (var i = 0 ؛ i <atext.length ؛ i ++) {
var otd = otr.insertcell (i) ؛
otd.appendchild (atext [i]) ؛
}
}
</script>
<ملخص الجدول = "قائمة الأعضاء في EE Sunday" id = "member">
<Sption> قائمة الأعضاء </caption>
<tr>
<th scope = "col"> الاسم </th>
<th scope = "col"> class </h>
<th scope = "col"> عيد ميلاد </th>
<th scope = "col"> constellation </h>
<th scope = "col"> mobile </h>
</r>
<tr>
<td> Isaac </td>
<td> W13 </td>
<td> 24 يونيو </td>
<td> السرطان </td>
<td> 1118159 </td>
</r>
<tr>
<td> girlwing </td>
<td> W210 </td>
<td> سبتمبر 16 </td>
<td> virgo </td>
<td> 1307994 </td>
</r>
<tr>
<td> Tastestory </td>
<td> W15 </td>
<td> 29 نوفمبر </td>
<td> sagittarius </td>
<td> 1095245 </td>
</r>
</table>
حذف الأعمدة
نسخة الكود كما يلي:
وظيفة deletecolumn (otable ، inum) {
// تخصيص وظيفة حذف العمود ، أي حذف الخلية المقابلة لكل صف
لـ (var i = 0 ؛ i <otable.rows.length ؛ i ++)
otable.rows [i] .deletecell (inum) ؛
}
window.onload = function () {
var otable = document.getElementById ("table1") ؛
DELETECOLUMN (otable ، 2) ؛
}
لحذف أعمدة الجدول ، لا توجد طريقة قابلة للاتصال مباشرة في DOM. تحتاج إلى كتابة طريقة deletecolumn () بنفسك. تقبل هذه الطريقة معلمتين ، معلمة واحدة هي كائن الجدول ، والمعلمة الأخرى هي رقم العمود الذي تريد حذفه. طريقة الكتابة بسيطة للغاية. باستخدام طريقة DELETECELL () ، يقوم كل صف بتنفيذ الطريقة المقابلة لحذف الخلايا.